:root{
      --bg:#f4f6f8;
      --card:#ffffff;
      --text:#111827;
      --muted:#6b7280;
      --primary:#2e7d32;
      --primary-ghost:#e7f3e8;
      --danger:#c62828;
      --radius:16px;
      --shadow:0 6px 18px rgba(0,0,0,.06);
    }

    *{box-sizing:border-box}
    html{scrollbar-gutter:stable}
    @supports not (scrollbar-gutter: stable) {
      html{overflow-y:scroll}
    }
    html,body{margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
      color:var(--text);
      background:linear-gradient(180deg,#f9fafb,#eef2f7 30%,#e8edf3 100%);
      min-height:100vh;
    }

    .container{max-width:980px;margin:24px auto;padding:0 16px}
    .topbar{background:#fff;border-bottom:1px solid #e5e7eb}
    .brand{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;max-width:980px;margin:0 auto;width:100%;box-sizing:border-box;overflow:visible}
    .brand-left{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;overflow:visible}
    .header-right{display:flex;align-items:center;justify-content:flex-end;flex-shrink:0;margin-left:8px}
    .subtitle{margin:2px 0 0;color:var(--muted);font-size:13px}

    .main-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:18px}
    .tab{padding:10px 16px;border-radius:20px;border:1px solid #d1d5db;background:#fff;font-weight:600;cursor:pointer;transition:all .2s ease}
    .tab:hover{background:#f3f4f6}
    .tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}
    .tab.disabled{opacity:.5;cursor:not-allowed}

    .panel{background:var(--card);border-radius:24px;padding:18px;margin:16px 0 22px;box-shadow:var(--shadow)}
    .panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
    .panel-head h2{margin:0;font-size:18px}

    .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    .field{display:flex;flex-direction:column;gap:8px}
    .field-wide{grid-column:1 / -1}
    label{font-size:13px;color:var(--muted)}
    select,input,textarea{padding:12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff;font-size:14px}
    textarea{resize:vertical}
    .hint{color:var(--muted);font-size:12px;margin-top:4px}

    .inline-options{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
    .inline-options label{display:inline-flex;align-items:center;gap:6px}

    .result{display:flex;align-items:center;justify-content:space-between;padding:12px 0 0;margin-top:10px;border-top:1px dashed #e5e7eb;flex-wrap:wrap;gap:10px}
    .price{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
    .price strong{font-size:18px}
    .muted{color:var(--muted)}
    .sep{margin:0 4px;color:#d1d5db}
    .actions{display:flex;gap:10px}

    .btn{border:1px solid #e5e7eb;background:#fff;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:600;transition:.2s}
    .btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
    .btn.primary{background:var(--primary);color:#fff;border-color:var(--primary)}
    .btn.outline{background:var(--primary-ghost);color:var(--primary);border-color:transparent}
    .btn.danger{background:#ffeaea;border-color:#ffd2d2;color:var(--danger)}
    .btn.small{padding:6px 10px;border-radius:10px;font-size:12px}

    .table-wrap{overflow:auto;border-radius:14px;border:1px solid #e5e7eb}
    table{width:100%;border-collapse:separate;border-spacing:0}
    th,td{padding:10px 12px;border-bottom:1px solid #eef2f7;font-size:14px}
    thead th{background:#f8fafc;text-align:left}
    tbody tr:last-child td{border-bottom:none}
    td.right{text-align:right}
    .bill-actions{display:flex;gap:10px;margin-top:12px}

    .grommet-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:8px;flex-wrap:wrap}
    .check{display:flex;align-items:center;gap:8px;font-weight:600}
    .caps-info{display:flex;align-items:center;gap:10px}
    .preview-wrap{margin-top:10px;background:#f8fafc;border:1px dashed #d1d5db;border-radius:12px;padding:10px;text-align:center}
    .preview-wrap.hidden{display:none}
    canvas{display:block;width:100%;max-width:520px;height:auto;margin:auto;background:#fff;border-radius:10px;border:1px solid #e5e7eb}
    .preview-legend{color:var(--muted);font-size:12px;margin-top:6px;text-align:center}

    .section.hidden{display:none}

    @keyframes pulse { 0% { transform:scale(1); } 30% { transform:scale(1.06); } 60% { transform:scale(1); } 100% { transform:scale(1); } }
    .pulse { animation: pulse .35s ease-in-out; }

    .stamp-preview{ margin-top:10px; background:#f8fafc; border:1px dashed #d1d5db; border-radius:12px; padding:10px; display:flex; flex-direction:column; align-items:center; }
    #stampCanvas{ display:block; width:100%; max-width:420px; height:auto; background:#fff; border-radius:10px; border:1px solid #e5e7eb; }
    #lblCanvas{ display:block; width:100%; max-width:420px; height:auto; background:#fff; border-radius:10px; border:1px solid #e5e7eb; }

    .services-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
    .services-list .service-btn{text-align:left}

    .modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 9999; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal.hidden { display: none; }
    .modal-content { background: #fff; border-radius: 20px; padding: 24px; max-width: 700px; width: 95%; max-height: 90vh; overflow-y: auto; box-shadow: 0 8px 28px rgba(0,0,0,0.15); animation: fadeIn .3s ease; }
    .confirm-modal-content { max-width: 420px; text-align: center; padding: 28px 24px 22px; }
    .confirm-modal-icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 30px; background: #ffeaea; box-shadow: inset 0 0 0 1px #ffd2d2; }
    .confirm-modal-content h2 { margin: 0 0 10px; font-size: 22px; }
    .confirm-modal-text { margin: 0 0 22px; color: var(--muted); line-height: 1.5; font-size: 14px; }
    .confirm-modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
    .confirm-modal-actions .btn { min-width: 132px; }
    @keyframes fadeIn { from {opacity: 0; transform: translateY(20px);} to {opacity: 1; transform: translateY(0);} }

    input.error { border-color: var(--danger); background: #ffeaea; }
    .hint.error { color: var(--danger); font-weight: 600; }
    .footer{display:flex;justify-content:center;margin:28px 0 18px;color:var(--muted);font-size:13px}
    .footer-inner{display:flex;align-items:center;justify-content:center;position:relative;width:100%;max-width:980px;margin:0 auto;padding:0 16px;box-sizing:border-box;min-height:52px}
    .footer-copy{text-align:center}
    .footer-copy-title{font-weight:600;font-size:14px}
    .footer-copy-note{margin-top:2px;color:#6b7280;font-size:12px}
    .footer-bookstore-logo{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:block;height:52px;width:auto;max-width:min(36vw,220px);object-fit:contain}
    @media(max-width:640px){
      .footer-inner{flex-direction:column;gap:12px;min-height:0;padding-bottom:4px}
      .footer-bookstore-logo{position:static;transform:none;max-width:min(70vw,220px)}
    }

    @media(max-width:820px){ .grid{grid-template-columns:repeat(2,1fr)} .services-list{grid-template-columns:1fr} }
    @media(max-width:520px){ .grid{grid-template-columns:1fr} }

    .site-logo-link { display: inline-flex; align-items: center; max-width: 100%; min-width: 0; text-decoration: none; color: inherit; line-height: 0; overflow: visible; }
    .site-logo-wrap { display: inline-block; position: relative; overflow: visible; line-height: 0; max-width: 100%; transform-origin: left center; transition: transform 0.4s ease, filter 0.4s ease; }
    .site-logo { display: block; height: 44px; width: auto; max-width: min(58vw, 280px); object-fit: contain; object-position: left center; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12)); }
    .site-logo-shine {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      -webkit-mask-size: 100% 100%;
      mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: left center;
      mask-position: left center;
      -webkit-mask-mode: alpha;
      mask-mode: alpha;
    }
    .site-logo-wrap img.site-logo.site-logo--theme-light { display: block; }
    .site-logo-wrap img.site-logo.site-logo--theme-dark { display: none; }
    body.dark-mode .site-logo-wrap img.site-logo.site-logo--theme-light { display: none; }
    body.dark-mode .site-logo-wrap img.site-logo.site-logo--theme-dark { display: block; }
    .subtitle { margin: 2px 0 0; color: #6b7280; font-size: 13px; }

    #themeToggle,
    .theme-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      min-width: 44px;
      padding: 0;
      margin: 0;
      background: none;
      border: none;
      border-radius: 12px;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
      transition: transform 0.3s ease, background 0.2s ease;
    }
    #themeToggle::before,
    .theme-toggle::before { content: none !important; display: none !important; margin: 0 !important; }
    #themeToggle:hover,
    .theme-toggle:hover { transform: rotate(15deg) scale(1.12); background: rgba(46, 125, 50, 0.08); }

    .main-tabs .tab::before{ display:inline-block; margin-right:6px; transform: translateY(1px); }
    .tab[data-tab="copy"]::before     { content: "📄"; }
    .tab[data-tab="wide"]::before     { content: "🖨️"; }
    .tab[data-tab="scan"]::before     { content: "📷"; }
    .tab[data-tab="bind"]::before     { content: "📚"; }
    .tab[data-tab="lam"]::before      { content: "📇"; }
    .tab[data-tab="cards"]::before    { content: "🪪"; }
    .tab[data-tab="labels"]::before   { content: "🏷️"; }
    .tab[data-tab="stamps"]::before   { content: "🫆"; }
    .tab[data-tab="invoice"]::before  { content: "📑"; }
    .tab[data-tab="services"]::before { content: "⚙️"; }

    .panel.section[data-section]{ background-size: cover; background-position: center; background-repeat: no-repeat; }
    .panel.section[data-section="copy"]{ background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23c8f7d4'/><stop offset='1' stop-color='%23a8e6cf'/></linearGradient></defs><rect width='800' height='600' fill='url(%23g)'/><g fill='%23ffffff' fill-opacity='0.8' stroke='%23000000' stroke-opacity='0.05'><rect x='90' y='80'  width='120' height='90' rx='8' transform='rotate(-12 150 125)'/><rect x='300' y='60' width='150' height='110' rx='10' transform='rotate(10 375 115)'/><rect x='520' y='120' width='130' height='95' rx='10' transform='rotate(-6 585 170)'/><rect x='120' y='280' width='160' height='115' rx='12' transform='rotate(8 200 338)'/><rect x='360' y='300' width='170' height='120' rx='12' transform='rotate(-8 445 360)'/><rect x='580' y='320' width='130' height='95' rx='10' transform='rotate(12 645 368)'/></g></svg>"); }
    .panel.section[data-section="wide"]{ background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23dff2ff'/><stop offset='1' stop-color='%23bde6ff'/></linearGradient></defs><rect width='800' height='600' fill='url(%23g)'/><g fill='%23ffffff' fill-opacity='0.75'><rect x='120' y='120' width='560' height='70' rx='12'/><rect x='120' y='240' width='560' height='70' rx='12'/><rect x='120' y='360' width='560' height='70' rx='12'/></g></svg>"); }
    .panel.section[data-section="scan"]{ background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23d7f7f4'/><stop offset='1' stop-color='%23b9efe7'/></linearGradient></defs><rect width='800' height='600' fill='url(%23g)'/><g stroke='%2300a7a7' stroke-opacity='0.15' stroke-width='18'><path d='M0,120 L800,120'/><path d='M0,260 L800,260'/><path d='M0,400 L800,400'/></g></svg>"); }
    .panel.section[data-section="bind"]{ background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%fff3e0'/><stop offset='1' stop-color='%fff0d0'/></linearGradient></defs><rect width='800' height='600' fill='%23fff6e6'/><g fill='%23ffffff' stroke='%23000000' stroke-opacity='0.05'><rect x='170' y='160' width='180' height='120' rx='8'/><rect x='370' y='160' width='180' height='120' rx='8'/><rect x='270' y='320' width='200' height='130' rx='10'/></g></svg>"); }
    .panel.section[data-section="lam"]{ background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23f1e9ff'/><stop offset='1' stop-color='%23e4dcff'/></linearGradient></defs><rect width='800' height='600' fill='url(%23g)'/><g fill='%23ffffff' fill-opacity='0.8' stroke='%23000000' stroke-opacity='0.05'><rect x='150' y='160' width='160' height='100' rx='10'/><rect x='340' y='190' width='170' height='110' rx='10' transform='rotate(-6 425 245)'/><rect x='540' y='230' width='160' height='100' rx='10'/></g></svg>"); }
    .panel.section[data-section="cards"]{ background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23eaf4ff'/><stop offset='1' stop-color'%23d6eaff'/></linearGradient></defs><rect width='800' height='600' fill='%23eaf3ff'/><g fill='%23ffffff' stroke='%23000000' stroke-opacity='0.05'><rect x='150' y='170' width='210' height='120' rx='12'/><rect x='420' y='210' width='230' height='130' rx='12' transform='rotate(4 535 275)'/></g></svg>"); }
    .panel.section[data-section="labels"]{ background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%ffff3e6'/><stop offset='1' stop-color='%ffffd9c'/></linearGradient></defs><rect width='800' height='600' fill='%23fff2e2'/><g fill='%23ffffff' stroke='%23000000' stroke-opacity='0.05'><rect x='160' y='190' width='170' height='90' rx='20'/><rect x='360' y='240' width='200' height='90' rx='20'/><rect x='590' y='200' width='120' height='70' rx='20'/></g></svg>"); }
    .panel.section[data-section="stamps"]{ background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23efe7ff'/><stop offset='1' stop-color='%23e1d9ff'/></linearGradient></defs><rect width='800' height='600' fill='url(%23g)'/><g fill='none' stroke='%235b4ae6' stroke-opacity='0.15' stroke-width='8'><circle cx='200' cy='220' r='70'/><circle cx='420' cy='300' r='90'/><circle cx='620' cy='230' r='60'/></g></svg>"); }
    .panel.section[data-section="invoice"]{ background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23eef2f8'/><stop offset='1' stop-color='%23e2e8f0'/></linearGradient></defs><rect width='800' height='600' fill='url(%23g)'/><g fill='%23ffffff' stroke='%23000000' stroke-opacity='0.05'><rect x='220' y='160' width='160' height='110' rx='10'/><rect x='400' y='200' width='180' height='120' rx='10'/></g></svg>"); }
    .panel.section[data-section="services"]{ background-image: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23e8fff3'/><stop offset='1' stop-color='%23d7ffea'/></linearGradient></defs><rect width='800' height='600' fill='url(%23g)'/><g fill='%2300a86b' fill-opacity='0.15'><circle cx='150' cy='160' r='20'/><circle cx='260' cy='260' r='14'/><circle cx='520' cy='200' r='18'/><circle cx='640' cy='320' r='22'/></g></svg>"); }

    .panel.section[data-section] { background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-attachment: scroll; background-color: transparent !important; }
    .panel.section[data-section]::before { display: none !important; }

    label::before { display:inline-block; margin-right:6px; font-size:16px; transform:translateY(1px); opacity:0.9; }
    label[for="format"]::before      {content:"🗒️";} label[for="sides"]::before       {content:"↔️";} label[for="colorMode"]::before   {content:"🎨";} label[for="media"]::before       {content:"📄";} label[for="qty"]::before         {content:"🔢";}
    label[for="wfWidth"]::before     {content:"📏";} label[for="wfHeight"]::before    {content:"📐";} label[for="wfColor"]::before     {content:"🎨";} label[for="wfMedia"]::before     {content:"📄";} label[for="wfGrommets"]::before  {content:"🪛";}
    label[for="scanSize"]::before    {content:"📄";} label[for="scanQty"]::before     {content:"🔢";} label[for="scanDPI"]::before     {content:"📸";} label[for="scanColor"]::before   {content:"🎨";} label[for="scanFormat"]::before  {content:"🗂️";}
    label[for="bindFormat"]::before  {content:"📏";} label[for="bindType"]::before    {content:"📚";} label[for="bindQty"]::before     {content:"🔢";}
    label[for="lamSize"]::before     {content:"📄";} label[for="lamMic"]::before      {content:"📏";} label[for="lamQty"]::before      {content:"🔢";}
    label[for="cardsPacks"]::before  {content:"🪪";} label[for="cardsColor"]::before  {content:"🎨";} label[for="cardsSize"]::before   {content:"📏";} label[for="cardsSides"]::before  {content:"↔️";} label[for="cardsPaper"]::before  {content:"📜";}
    label[for="lblSize"]::before     {content:"📏";} label[for="lblRolls"]::before    {content:"🔢";} label[for="lblText"]::before     {content:"✍️";} label[for="lblMaterial"]::before {content:"🏷️";}
    label[for="stampBrand"]::before  {content:"🏢";} label[for="stampSize"]::before   {content:"📏";} label[for="stampColor"]::before  {content:"🫟";} label[for="stampQty"]::before    {content:"🔢";} label[for="roundTop"]::before    {content:"🔼";} label[for="roundBottom"]::before {content:"🔽";} label[for="roundCenter"]::before {content:"🎯";} label[for="rectCompany"]::before {content:"🏢";} label[for="rectCity"]::before    {content:"🌆";} label[for="rectStreet"]::before  {content:"🚪";} label[for="rectVAT"]::before     {content:"💼";}
    label[for="invCompany"]::before  {content:"🏢";} label[for="invEIK"]::before      {content:"🔢";} label[for="invMOL"]::before      {content:"👤";} label[for="invAddr"]::before     {content:"📍";} label[for="invEmail"]::before    {content:"📧";} label[for="invQty"]::before      {content:"🔢";} label[for="invFormat"]::before   {content:"📄";} label[for="invCopies"]::before   {content:"📑";} label[for="invBank"]::before     {content:"🏦";} label[for="invSwift"]::before    {content:"🏛️";} label[for="invIban"]::before     {content:"💶";}
    #sec-invoice label:has(#invNumbering)::before { content: "🔢"; } #sec-invoice label:has(#invNewCliche)::before { content: "🆕"; }
    label[for="serviceQty"]::before  {content:"🔢";} label[for="serviceList"]::before {content:"⚙️";}
    #sendModal label:has(#clientPickup)::before  { content: "🏬"; } #sendModal label:has(#clientDelivery)::before{ content: "🚚"; } #sendModal label:has(#clientInvoice)::before { content: "🧾"; } #sendModal label[for="clientFileLink"]::before { content: "📎"; }

    button::before, .btn::before { display:inline-block; margin-right:6px; font-size:15px; transform:translateY(1px); color:inherit; opacity:0.9; }
    #addBtn::before, #wfAdd::before, #scanAdd::before, #bindAdd::before, #lamAdd::before, #cardsAdd::before, #lblAdd::before, #stampAdd::before, #invAdd::before, #serviceAdd::before { content:"➕"; }
    #clearCopy::before, #wfClear::before, #scanClear::before, #bindClear::before, #lamClear::before, #cardsClear::before, #lblClear::before, #stampClear::before, #invClear::before, #serviceClear::before, #clearBill::before { content:"🚮"; }
    .btn-del::before { content:"❌"; display:none !important; }
    #wfDownload::before, #lblDownload::before, #stampDownload::before, #savePDF::before { content:"💾"; }
    #sendOffer::before, #confirmSend::before { content:"✉️"; }
    #cancelSend::before { content:"🚫"; }
    #serviceAdd[disabled]::before { opacity:0.3; }

    @keyframes emoji-bounce { 0% { transform: translateY(1px) scale(1); } 40% { transform: translateY(-3px) scale(1.1); } 100% { transform: translateY(1px) scale(1); } }
    button:hover::before, .btn:hover::before, .btn.primary:hover::before, #confirmSend:hover::before, #sendOffer:hover::before { animation: emoji-bounce 0.25s ease-in-out; }

    @keyframes sectionFadeIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
    .section:not(.hidden) { animation: sectionFadeIn 0.4s ease-in-out; }
    .section { transition: opacity 0.25s ease, transform 0.25s ease; }

    /* ЕФЕКТ ХЕДЪР */
    .site-logo-wrap:hover { transform: scale(1.05); filter: drop-shadow(0 0 6px rgba(46,125,50,0.4)); }

    /* SPLASH SCREEN */
    #splash-screen { position: fixed; inset: 0; background: linear-gradient(180deg,#f9fafb 0%,#eef2f7 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; z-index: 99999; transition: opacity 1s ease, visibility 1s ease; pointer-events: none !important; }
    .splash-logo { width: 150px; height: auto; object-fit: contain; animation: splash-bounce 1.4s ease-in-out infinite; }
    .splash-title { font-size: 22px; color: var(--primary); font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 2px 6px rgba(0,0,0,0.1); }
    @keyframes splash-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    body.loaded #splash-screen { opacity: 0 !important; visibility: hidden !important; display: none !important; }

    #sec-wide label.check span::after { content: " 🕳️"; font-size: 16px; margin-left: 4px; opacity: 0.9; }

    /* TOAST */
    .toast { position: fixed; top: 16px; right: 16px; background: #2e7d32; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 13px; box-shadow: 0 3px 10px rgba(0,0,0,0.2); z-index: 9999; opacity: 0; transform: translateY(-8px); animation: toastFade 2.8s ease-in-out forwards; }
    @keyframes toastFade { 0% { opacity: 0; transform: translateY(-8px); } 10%, 80% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-8px); } }
    
    /* ЕТИКЕТИ FIX */
    #sec-labels .field > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px; }
    #sec-labels .field > div label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; white-space: nowrap; }
    #sec-labels .field label:first-child { display: block; margin-bottom: 6px; }
    #sec-labels #lblText { display: block; width: 100%; margin-top: 6px; }
    @media (max-width: 480px) { #sec-labels .field > div { flex-direction: column; align-items: flex-start; } }

    /* HEADER — MOBILE */
    @media (max-width: 600px) {
      .topbar { overflow: visible; }
      .brand { padding: 10px 14px; gap: 10px; }
      .brand-left { gap: 0; }
      .header-right { margin-left: 6px; }
      .site-logo { height: 38px; max-width: calc(100vw - 96px); }
      #themeToggle,
      .theme-toggle { width: 42px; height: 42px; min-width: 42px; font-size: 20px; }
    }
    @media (max-width: 380px) {
      .brand { padding: 8px 12px; }
      .site-logo { height: 34px; max-width: calc(100vw - 88px); }
      #themeToggle,
      .theme-toggle { width: 40px; height: 40px; min-width: 40px; font-size: 19px; }
    }

    /* МОБИЛНИ FIXES */
    @media (max-width: 600px) {
      select { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
      #sec-bind .grid, #sec-stamps .grid { overflow-x: hidden; display: flex !important; flex-direction: column !important; gap: 10px; }
      #sec-bind select, #sec-stamps select { margin-bottom: 6px; }
      #sec-stamps .field, #sec-stamps .field-wide, #sec-stamps select, #sec-stamps input, #sec-stamps textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
      #sec-stamps #roundFields .grid { display: flex; flex-direction: column; gap: 8px; }
      #sec-stamps .stamp-preview { padding: 10px; overflow: hidden; }
      #sec-stamps .stamp-preview button { width: 100%; max-width: 260px; margin: 10px auto 0; display: block; }
      #deliveryFields { grid-template-columns: 1fr !important; }
    }

    /* SHINE ЕФЕКТ */
    .panel-head h2 { position: relative; display: inline-block; overflow: hidden; }
    .site-logo-shine::after { content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-25deg); pointer-events: none; animation: headerShine 1.8s ease-in-out 0.5s forwards; }
    .panel-head h2::after { content: ""; position: absolute; top: 0; left: -80%; width: 60%; height: 100%; background: linear-gradient( 120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100% ); transform: skewX(-25deg); pointer-events: none; }
    .section:not(.hidden) .panel-head h2::after { animation: shinePass 1.3s ease-in-out; }
    @keyframes headerShine { 0% { left: -80%; opacity: 1; } 65% { left: 130%; opacity: 1; } 100% { left: 130%; opacity: 0; } }
    @keyframes shinePass { 0% { left: -75%; } 60% { left: 125%; } 100% { left: 125%; } }

    .section:not(.hidden).panel { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); transition: box-shadow 0.3s ease; }
    .panel { background: #f9fafb; border-radius: 16px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); border: 1px solid #e5e7eb; }
    
    /* SUMMARY PANEL GLOW */
    #summary.panel { background: #f3f4f6; border: 1px solid #d1d5db; animation: panelGlow 2s ease-in-out; }
    @keyframes panelGlow { 0% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } 50% { box-shadow: 0 14px 38px rgba(0, 0, 0, 0.65); } 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } }

    .main-tabs .tab { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); transition: box-shadow 0.3s ease, transform 0.2s ease; }
    .main-tabs .tab:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); transform: translateY(-2px); }
    .main-tabs .tab.active { box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); transform: translateY(-1px); }

    .topbar { position: relative; overflow: visible; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); z-index: 10; }
    .topbar::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: linear-gradient( to bottom, rgba(200, 240, 210, 0.22) 0%, rgba(220, 245, 225, 0.12) 50%, rgba(255, 255, 255, 0) 100% ); z-index: 0; pointer-events: none; }
    .topbar > * { position: relative; z-index: 1; }

    .footer { position: relative; overflow: visible; padding: 28px 0 20px 0; z-index: 5; background: transparent; }
    .footer::before { content: none !important; }
    .footer > * { position: relative; z-index: 1; }

    body { opacity: 0; transition: opacity 0.8s ease-out; }
    body.loaded { opacity: 1; }

    /* ЗА НАС */
    #sec-about { animation: fadeInAbout 1s ease-out; }
    .about-content { text-align: center; padding: 30px; font-size: 16px; line-height: 1.6; color: var(--text); }
    .about-content p { max-width: 800px; margin: 0 auto 20px; color: var(--muted); }
    .about-gallery { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin: 25px auto; }
    .about-gallery img { width: 260px; height: 180px; object-fit: cover; border-radius: 12px; box-shadow: var(--shadow); transition: transform 0.3s ease; }
    .about-gallery img:hover { transform: scale(1.04); }
    .about-map { margin: 30px auto 0; max-width: 700px; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }
    .about-map iframe { width: 100%; height: 300px; border: none; }
    .map-title { margin-top: 40px; margin-bottom: 12px; font-size: 20px; font-weight: 700; color: var(--primary); text-align: center; letter-spacing: 0.5px; animation: fadeInAbout 1s ease-out; }
    .contact-info { display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; gap: 20px; margin: 40px auto 10px; max-width: 900px; position: relative; }
    .contact-item { flex: 1 1 260px; background: #f9fafb; border-radius: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.08); padding: 20px; text-align: center; transition: transform 0.4s ease, box-shadow 0.4s ease; position: relative; overflow: hidden; animation: fadeScaleIn 1s ease-out; }
    .contact-item::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%); transform: skewX(-25deg); }
    .contact-item:hover::before { animation: shine 1.2s ease-in-out; }
    .contact-item:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
    .contact-item::after { content: "✨"; position: absolute; top: 10px; right: 12px; opacity: 0; font-size: 18px; transition: opacity 0.3s ease; }
    .contact-item:hover::after { opacity: 1; }
    @keyframes shine { 0% { left: -75%; } 100% { left: 125%; } }
    @keyframes fadeInAbout { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
    @keyframes fadeScaleIn { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
    @keyframes softPulse { 0%, 100% { box-shadow: 0 4px 10px rgba(0,0,0,0.08); } 50% { box-shadow: 0 6px 16px rgba(0,0,0,0.15); } }
    .contact-item { animation: fadeScaleIn 1s ease-out, softPulse 6s infinite ease-in-out; }
    #sec-about::after { display: none !important; }

    .tab-logo { width: 22px; height: 22px; object-fit: contain; margin-right: 6px; vertical-align: middle; border-radius: 6px; transition: transform 0.25s ease; }
    .main-tabs .tab:hover .tab-logo { transform: scale(1.08); }


    /* БУТОН ЗА ИЗТРИВАНЕ X */
    .btn-del { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; padding: 0; margin: 0; background: #2b2b2b; border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 2px 6px rgba(0,0,0,0.4) inset, 0 2px 8px rgba(0,0,0,0.35); cursor: pointer; transition: background 0.12s linear; -webkit-tap-highlight-color: transparent; user-select: none; }
    .btn-del .del-x { font-size: 28px; line-height: 1; display: inline-block; color: #c62828; transform: none; transition: none; }
    .btn-del:hover { background: #343434; }
    .btn-del:active { transform: translateY(0); }
    .btn-del > svg, .btn-del > i { display: none !important; }

    /* ЗА НАС ТАБ */
    .main-tabs .tab[data-tab="about"] { display: flex; align-items: center; justify-content: center; padding: 6px 10px !important; height: 38px !important; min-width: 70px !important; max-width: 70px !important; border-radius: 20px !important; border: 1px solid #d1d5db; background: #fff; font-size: 0 !important; cursor: pointer; transition: all 0.25s ease; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
    .main-tabs .tab[data-tab="about"]:hover { background: #f3f4f6; transform: translateY(-1px); }
    .main-tabs .tab[data-tab="about"].active { background: var(--primary); border-color: var(--primary); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
    .main-tabs .tab[data-tab="about"] img.tab-logo { width: 36px; height: 36px; object-fit: contain; margin: 0 auto; transition: transform 0.25s ease; }
    .main-tabs .tab[data-tab="about"] img.tab-logo.tab-logo--theme-light { display: block; }
    .main-tabs .tab[data-tab="about"] img.tab-logo.tab-logo--theme-dark { display: none; }
    body.dark-mode .main-tabs .tab[data-tab="about"] img.tab-logo.tab-logo--theme-light { display: none; }
    body.dark-mode .main-tabs .tab[data-tab="about"] img.tab-logo.tab-logo--theme-dark { display: block; }
    .main-tabs .tab[data-tab="about"].active img.tab-logo.tab-logo--theme-light { display: none; }
    .main-tabs .tab[data-tab="about"].active img.tab-logo.tab-logo--theme-dark { display: block; }
    .main-tabs .tab[data-tab="about"]:hover img.tab-logo { transform: scale(1.08); }
    .main-tabs .tab[data-tab="about"]::before { content: none !important; }

    /* MODAL FIX */
    body.no-scroll { overflow: hidden; height: 100%; position: fixed; width: 100%; }
    @supports (-webkit-touch-callout: none) { .modal { position: absolute !important; } }
    #deliveryFields { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

    /* ТЪМЕН РЕЖИМ И ФИКС ЗА ФОНОВЕ */
    body.dark-mode { background: #121212; color: #f1f1f1; }
    body.dark-mode .topbar { background: #1f1f1f; border-color: #2a2a2a; }
    body.dark-mode .panel { background: #1a1a1a; box-shadow: 0 4px 16px rgba(0,0,0,0.6); border: 1px solid #2a2a2a; }
    body.dark-mode input, body.dark-mode select, body.dark-mode textarea { background: #2a2a2a; color: #f1f1f1; border-color: #3a3a3a; }
    body.dark-mode label::before { background: #2f2f2f; color: #ddd; box-shadow: inset 0 1px 1px rgba(255,255,255,0.05); }
    body.dark-mode .tab { background: #2a2a2a; color: #eee; border-color: #3a3a3a; }
    body.dark-mode .tab.active { background: var(--primary); color: #fff; }
    body.dark-mode .btn { background: #2a2a2a; color: #f1f1f1; border-color: #3a3a3a; }
    body.dark-mode .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
    body.dark-mode table { background: #1a1a1a; }
    body.dark-mode th { background: #2a2a2a; color: #f1f1f1; }
    body.dark-mode td { color: #eee; border-color: #333; }
    body.dark-mode .footer { color: #888; background: transparent; }
    body.dark-mode .footer-copy-note { color: #9ca3af; }
    .footer a { color: inherit; text-decoration: none; }
    .footer a:hover { color: var(--primary); text-decoration: underline; }
    body.dark-mode .modal-content { background: #1a1a1a; color: #f1f1f1; box-shadow: 0 8px 28px rgba(0,0,0,0.8); }
    body.dark-mode .confirm-modal-icon { background: #3a2020; box-shadow: inset 0 0 0 1px #5a3030; }
    body.dark-mode #themeToggle:hover,
    body.dark-mode .theme-toggle:hover { background: rgba(255, 255, 255, 0.08); }
    body.dark-mode .site-logo-wrap:hover { filter: drop-shadow(0 0 8px rgba(80,220,100,0.55)); }
    body.dark-mode .site-logo--theme-dark { filter: drop-shadow(0 0 4px rgba(80,220,100,0.35)); }
    body.dark-mode .site-logo-shine::after {
      width: 72%;
      background: linear-gradient(
        120deg,
        rgba(123, 201, 111, 0) 0%,
        rgba(170, 255, 160, 0.95) 40%,
        rgba(255, 255, 255, 1) 50%,
        rgba(170, 255, 160, 0.95) 60%,
        rgba(123, 201, 111, 0) 100%
      );
      mix-blend-mode: soft-light;
      filter: brightness(1.25) saturate(1.35);
    }
    body.dark-mode .toast { background: #00c853; color: #111; }
    body.dark-mode #summary.panel { background: #151515; animation: panelGlowDark 2s ease-in-out; }
    body.dark-mode .main-tabs .tab { box-shadow: 0 2px 8px rgba(255,255,255,0.08); }
    body.dark-mode .main-tabs .tab.active { box-shadow: 0 4px 12px rgba(255,255,255,0.15); }
    body.dark-mode .topbar { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.6); }
    body.dark-mode .topbar::after { background: linear-gradient( to bottom, rgba(144, 238, 144, 0.22) 0%, rgba(144, 238, 144, 0.10) 60%, rgba(144, 238, 144, 0) 100% ); }
    body.dark-mode .footer-bookstore-logo { filter: brightness(1.08); }
    body.dark-mode .contact-item { background: #1e1e1e; box-shadow: 0 4px 10px rgba(0,0,0,0.4); }
    body.dark-mode .contact-item:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.6); }
    body.dark-mode .main-tabs .tab[data-tab="about"] { background: #2a2a2a; border-color: #3a3a3a; box-shadow: 0 2px 8px rgba(255,255,255,0.08); }
    body.dark-mode .main-tabs .tab[data-tab="about"]:hover { background: #333; }
    body.dark-mode .main-tabs .tab[data-tab="about"].active { background: var(--primary); border-color: var(--primary); }
    @keyframes panelGlowDark { 0% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.75); } 50% { box-shadow: 0 16px 44px rgba(0, 0, 0, 1); } 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.75); } }

    /* ФИКС ЗА ФОНОВЕТЕ В ТЪМЕН РЕЖИМ */
    body.dark-mode .panel.section[data-section] {
        background-image: none !important;
        background-color: #1a1a1a !important;
    }