:root{
    --ink:#1B1F23;
    --paper:#F2F0E8;
    --paper-line:#D9D4C2;
    --rail:#14171A;
    --rail-line:#272B2E;
    --rail-text:#9CA09B;
    --rail-text-active:#F2F0E8;
    --accent:#B23A2E;
    --accent-soft:#B23A2E1A;
    --accent-2:#2F6F4E;
    --accent-2-soft:#2F6F4E1A;
    --muted:#6E7066;
    --line:#D9D4C2;
    --card:#FFFFFE;
    --display:'Space Grotesk',sans-serif;
    --body:'Inter',sans-serif;
    --mono:'IBM Plex Mono',monospace;
    --radius:4px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--ink);font-family:var(--body);color:var(--ink);}
  button{font-family:inherit;cursor:pointer;}
  input,select,textarea{font-family:inherit;}

  .app{display:flex;flex-direction:column;min-height:100vh;}

  /* ---- Top bar ---- */
  .topbar{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--rail);color:var(--rail-text-active);
    padding:14px 22px;border-bottom:1px solid var(--rail-line);
    position:sticky;top:0;z-index:50;
  }
  .brand{display:flex;align-items:baseline;gap:10px;}
  .brand .mark{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:0.01em;}
  .brand .mark span{color:var(--accent);}
  .brand .sub{font-size:11px;color:var(--rail-text);font-family:var(--mono);letter-spacing:0.02em;}
  .topbar-actions{display:flex;align-items:center;gap:14px;}
  .lang-toggle{display:flex;border:1px solid var(--rail-line);border-radius:20px;overflow:hidden;}
  .lang-toggle button{
    background:transparent;border:none;color:var(--rail-text);
    padding:6px 14px;font-size:12px;font-family:var(--mono);font-weight:600;letter-spacing:0.03em;
  }
  .lang-toggle button.active{background:var(--accent);color:#fff;}

  /* ---- Body layout ---- */
  .body{display:flex;flex:1;min-height:0;}
  .rail{
    width:200px;flex:0 0 200px;background:var(--rail);color:var(--rail-text);
    padding:18px 10px;border-right:1px solid var(--rail-line);
  }
  .rail-step{
    display:flex;align-items:flex-start;gap:10px;padding:12px 10px;border-radius:6px;
    cursor:pointer;margin-bottom:4px;transition:background .15s;
  }
  .rail-step:hover{background:#1E2225;}
  .rail-step.active{background:#1E2225;}
  .rail-step .num{
    font-family:var(--mono);font-size:11px;color:var(--rail-text);
    border:1px solid var(--rail-line);border-radius:50%;width:20px;height:20px;
    display:flex;align-items:center;justify-content:center;flex:0 0 20px;margin-top:1px;
  }
  .rail-step.active .num{background:var(--accent);color:#fff;border-color:var(--accent);}
  .rail-step.done .num{background:var(--accent-2);color:#fff;border-color:var(--accent-2);}
  .rail-step .label{font-size:13px;line-height:1.3;}
  .rail-step.active .label{color:var(--rail-text-active);font-weight:600;}
  .rail-step .hint{font-size:10.5px;color:#565952;margin-top:2px;}
  .rail-foot{margin-top:20px;padding:12px 12px;border-top:1px solid var(--rail-line);font-size:10.5px;color:#565952;line-height:1.5;}
  .rail-divider{height:1px;background:var(--rail-line);margin:14px 10px 14px;}
  .rail-step.admin .num{border-radius:6px;font-size:12px;}
  .rail-step.admin.active .num{background:var(--accent-2);border-color:var(--accent-2);}

  .formpane{flex:1 1 420px;min-width:360px;max-width:560px;overflow-y:auto;padding:28px 30px 60px;background:#1B1E21;color:#E9E7DF;}
  .formpane::-webkit-scrollbar{width:8px;}
  .formpane::-webkit-scrollbar-thumb{background:#33373a;border-radius:4px;}

  .step-section{display:none;}
  .step-section.active{display:block;}
  .step-title{font-family:var(--display);font-size:21px;font-weight:700;margin:0 0 4px;}
  .step-desc{font-size:12.5px;color:#9b9e96;margin:0 0 22px;line-height:1.5;}

  .field-row{margin-bottom:16px;}
  .field-row label{display:block;font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#ACAFA6;margin-bottom:6px;}
  .field-row .lang-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .field-row .lang-pair span.tag{font-family:var(--mono);font-size:9.5px;color:#787b73;margin-bottom:3px;display:block;}
  input[type=text],input[type=number],input[type=date],select,textarea{
    width:100%;background:#23272A;border:1px solid #34383B;color:#EFEDE4;
    padding:9px 10px;border-radius:var(--radius);font-size:13.5px;outline:none;
  }
  input::placeholder,textarea::placeholder{color:#666a62;}
  input:focus,select:focus,textarea:focus{border-color:var(--accent);}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
  textarea{resize:vertical;min-height:54px;}

  .template-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;}
  .template-card{
    border:1px solid #34383B;border-radius:var(--radius);padding:10px;cursor:pointer;
    display:flex;align-items:center;gap:8px;font-size:12px;background:#23272A;
  }
  .template-card .ico{font-size:18px;}
  .template-card.selected{border-color:var(--accent);background:var(--accent-soft);}

  /* ingredient search */
  .search-wrap{position:relative;margin-bottom:10px;}
  .search-results{
    border:1px solid #34383B;border-radius:var(--radius);max-height:220px;overflow-y:auto;background:#1E2225;
  }
  .search-results::-webkit-scrollbar{width:6px;}
  .search-results::-webkit-scrollbar-thumb{background:#33373a;}
  .ing-row{
    display:flex;align-items:center;justify-content:space-between;padding:9px 10px;
    border-bottom:1px solid #2A2E31;font-size:12.5px;
  }
  .ing-row:last-child{border-bottom:none;}
  .ing-name{font-weight:600;}
  .ing-meta{font-size:10.5px;color:#888c82;margin-top:2px;}
  .badge{
    display:inline-block;font-family:var(--mono);font-size:9px;border-radius:3px;padding:1px 5px;
    margin-left:4px;letter-spacing:.02em;
  }
  .badge.allergen{background:var(--accent-soft);color:#E08376;border:1px solid #5c2620;}
  .badge.enum{background:#2A2E31;color:#9da08f;border:1px solid #3a3e37;}
  .add-btn{
    background:transparent;border:1px solid #3c403d;color:#cfd2c8;border-radius:50%;width:24px;height:24px;
    font-size:15px;line-height:1;flex:0 0 24px;
  }
  .add-btn:hover{border-color:var(--accent);color:var(--accent);}

  .selected-list{margin-top:18px;}
  .total-bar{
    display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
    font-family:var(--mono);font-size:12px;padding:8px 10px;border-radius:var(--radius);
    background:#23272A;border:1px solid #34383B;
  }
  .total-bar.ok{color:var(--accent-2);border-color:#1f4632;}
  .total-bar.bad{color:#E08376;border-color:#5c2620;}
  .sel-row{
    display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid #2A2E31;
  }
  .sel-row .sel-name{flex:1;font-size:12.5px;}
  .sel-row .sel-name .sub{display:block;font-size:10px;color:#888c82;}
  .sel-row input[type=number]{width:72px;text-align:right;font-family:var(--mono);}
  .sel-row .pct-sign{font-family:var(--mono);font-size:11px;color:#888c82;}
  .rm-btn{background:transparent;border:none;color:#6c6f66;font-size:16px;padding:0 4px;}
  .rm-btn:hover{color:var(--accent);}

  .nutri-grid{display:grid;grid-template-columns:1fr 90px 50px;gap:8px;align-items:center;margin-bottom:8px;font-size:12.5px;}
  .nutri-grid .nh{font-size:10px;color:#888c82;text-transform:uppercase;letter-spacing:.04em;}
  .recalc-btn{
    background:#23272A;border:1px solid #34383B;color:#cfd2c8;border-radius:var(--radius);
    padding:8px 12px;font-size:12px;margin-top:6px;
  }
  .recalc-btn:hover{border-color:var(--accent);color:var(--accent);}

  .step-nav{display:flex;justify-content:space-between;margin-top:26px;}
  .btn{
    border-radius:var(--radius);padding:10px 18px;font-size:12.5px;font-weight:600;
    border:1px solid #34383B;background:#23272A;color:#EFEDE4;letter-spacing:.02em;
  }
  .btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
  .btn.primary:hover{background:#9a3025;}
  .btn:hover{border-color:#50544f;}
  .btn:disabled{opacity:.35;cursor:not-allowed;}

  /* ---- Preview pane ---- */
  .previewpane{flex:1 1 480px;background:#0F1113;display:flex;flex-direction:column;min-width:340px;}
  .preview-toolbar{
    display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--rail-line);
    flex-wrap:wrap;
  }
  .preview-toolbar select{width:auto;padding:7px 8px;font-size:12px;background:#1E2225;border-color:#34383B;color:#EFEDE4;}
  .status-pill{
    font-family:var(--mono);font-size:11px;padding:6px 12px;border-radius:20px;font-weight:600;letter-spacing:.02em;
    margin-left:auto;
  }
  .status-pill.ok{background:var(--accent-2-soft);color:#5FB98A;border:1px solid #1f4632;}
  .status-pill.bad{background:var(--accent-soft);color:#E08376;border:1px solid #5c2620;}
  .export-row{display:flex;gap:8px;padding:0 20px 14px;flex-wrap:wrap;}
  .export-row .btn{font-size:11.5px;padding:8px 12px;}

  .stage{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:30px 20px 50px;}
  #sheetOuter{position:relative;flex:0 0 auto;margin:0 auto;}
  .label-sheet{
    background:var(--paper);color:var(--ink);
    box-shadow:0 12px 36px rgba(0,0,0,.5);padding:0;font-family:var(--body);overflow:hidden;
    position:absolute;top:0;left:0;transform-origin:top left;
  }

  .tpl-band{padding:calc(10px * var(--cs,1)) calc(22px * var(--cs,1));font-family:var(--mono);font-size:calc(11px * var(--cs,1));letter-spacing:.05em;color:#fff;display:flex;align-items:center;gap:calc(8px * var(--cs,1));}
  .label-body{padding:calc(20px * var(--cs,1)) calc(22px * var(--cs,1)) calc(24px * var(--cs,1));position:relative;z-index:2;}
  .lbl-brand{font-family:var(--mono);font-size:calc(10.5px * var(--cs,1));letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
  .lbl-name{font-family:var(--display);font-weight:700;font-size:calc(23px * var(--cs,1));line-height:1.15;margin:calc(4px * var(--cs,1)) 0 calc(2px * var(--cs,1));}
  .lbl-name-en{font-size:calc(12.5px * var(--cs,1));color:var(--muted);margin-bottom:calc(14px * var(--cs,1));}
  .lbl-divider{border:none;border-top:1px solid var(--paper-line);margin:calc(14px * var(--cs,1)) 0;}
  .lbl-section-h{
    font-family:var(--mono);font-size:calc(10px * var(--cs,1));text-transform:uppercase;letter-spacing:.07em;
    color:var(--muted);margin-bottom:calc(6px * var(--cs,1));
  }
  .lbl-composition{font-size:calc(12.5px * var(--cs,1));line-height:1.65;}
  .lbl-composition b{font-weight:700;text-decoration:underline;}
  .allergen-box{
    margin-top:calc(12px * var(--cs,1));border:1.5px solid var(--accent);background:var(--accent-soft);border-radius:3px;
    padding:calc(9px * var(--cs,1)) calc(11px * var(--cs,1));font-size:calc(11.5px * var(--cs,1));font-weight:700;color:var(--accent);line-height:1.45;
  }
  .maycontain{font-size:calc(10.5px * var(--cs,1));font-style:italic;color:var(--muted);margin-top:calc(6px * var(--cs,1));line-height:1.4;}
  .nutri-table{width:100%;border-collapse:collapse;font-size:calc(11.5px * var(--cs,1));margin-top:calc(4px * var(--cs,1));}
  .nutri-table th{text-align:left;font-family:var(--mono);font-size:calc(9.5px * var(--cs,1));text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-bottom:1.5px solid var(--ink);padding-bottom:calc(4px * var(--cs,1));}
  .nutri-table td{padding:calc(5px * var(--cs,1)) 0;border-bottom:1px solid var(--paper-line);}
  .nutri-table td.val{text-align:right;font-family:var(--mono);}
  .nutri-table tr.sub td:first-child{padding-left:calc(14px * var(--cs,1));color:var(--muted);font-size:calc(11px * var(--cs,1));}
  .meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:calc(6px * var(--cs,1)) calc(14px * var(--cs,1));font-size:calc(11px * var(--cs,1));margin-top:calc(14px * var(--cs,1));}
  .meta-grid .mk{color:var(--muted);font-family:var(--mono);font-size:calc(9.5px * var(--cs,1));text-transform:uppercase;letter-spacing:.03em;display:block;}
  .codes-row{display:flex;align-items:center;justify-content:space-between;margin-top:calc(16px * var(--cs,1));gap:calc(10px * var(--cs,1));}
  .codes-row svg{max-width:calc(170px * var(--cs,1));}
  .codes-row img.code-img{max-width:calc(170px * var(--cs,1));max-height:calc(60px * var(--cs,1));}
  .empty-note{font-size:12px;color:var(--muted);font-style:italic;}
  #printGrid{position:fixed;left:-99999px;top:0;background:#fff;}
  .grid-cell-rect{position:absolute;background:var(--accent-soft);border:1px solid var(--accent);box-sizing:border-box;}

  .json-panel{
    margin:0 20px 24px;background:#1E2225;border:1px solid #2A2E31;border-radius:var(--radius);
    color:#cfd2c8;display:none;
  }
  .json-panel.open{display:block;}
  .json-panel-head{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid #2A2E31;font-family:var(--mono);font-size:11px;}
  .json-panel pre{margin:0;padding:12px;font-size:10.5px;max-height:220px;overflow:auto;font-family:var(--mono);line-height:1.5;}
  .copy-btn{background:transparent;border:1px solid #3c403d;color:#cfd2c8;border-radius:3px;padding:3px 8px;font-size:10px;}

  /* ---- Admin / database management ---- */
  .adminview{display:none;flex:1;overflow-y:auto;padding:28px 36px 60px;background:#16191B;color:#E9E7DF;}
  .adminview.active{display:block;}
  .admin-head h2{font-family:var(--display);font-size:22px;margin:0 0 4px;}
  .admin-head p{font-size:12.5px;color:#9b9e96;margin:0 0 20px;max-width:640px;line-height:1.5;}
  .admin-tabs{display:flex;gap:6px;border-bottom:1px solid #2A2E31;margin-bottom:18px;}
  .admin-tabs button{
    background:transparent;border:none;color:#9b9e96;padding:9px 14px;font-size:12.5px;font-weight:600;
    border-bottom:2px solid transparent;
  }
  .admin-tabs button.active{color:#EFEDE4;border-bottom-color:var(--accent);}
  .admin-pane{display:none;max-width:880px;}
  .admin-pane.active{display:block;}
  .admin-table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:12.5px;}
  .admin-table th{
    text-align:left;font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.04em;
    color:#888c82;border-bottom:1px solid #2A2E31;padding:0 8px 8px 0;
  }
  .admin-table td{padding:9px 8px 9px 0;border-bottom:1px solid #22262a;vertical-align:top;}
  .admin-table tr:hover td{background:#1b1e21;}
  .at-actions{display:flex;gap:6px;white-space:nowrap;}
  .at-btn{background:transparent;border:1px solid #34383B;color:#cfd2c8;border-radius:3px;padding:4px 8px;font-size:11px;}
  .at-btn:hover{border-color:var(--accent);color:var(--accent);}
  .at-btn.danger:hover{border-color:#8a2c22;color:#E08376;}
  .at-chip{display:inline-block;font-family:var(--mono);font-size:9.5px;background:#23272A;border:1px solid #34383B;border-radius:3px;padding:1px 5px;margin:1px 2px 0 0;color:#9da08f;}
  .admin-form{
    border:1px solid #2A2E31;border-radius:6px;padding:16px 18px;background:#1B1E21;margin-top:6px;
  }
  .admin-form h3{margin:0 0 12px;font-size:13.5px;font-family:var(--display);}
  .admin-form .grid-2{margin-bottom:10px;}
  .admin-form .field-row{margin-bottom:10px;}
  .check-grid{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
  .check-pill{
    display:flex;align-items:center;gap:5px;background:#23272A;border:1px solid #34383B;border-radius:14px;
    padding:5px 10px;font-size:11.5px;cursor:pointer;
  }
  .check-pill input{margin:0;width:auto;}
  .check-pill.checked{border-color:var(--accent);background:var(--accent-soft);}
  .admin-form-actions{display:flex;gap:8px;margin-top:14px;}
  .admin-error{color:#E08376;font-size:11.5px;margin-top:8px;min-height:14px;}
  .save-note{font-family:var(--mono);font-size:10.5px;color:#5FB98A;display:inline-flex;align-items:center;gap:5px;margin-left:10px;opacity:0;transition:opacity .25s;}
  .save-note.show{opacity:1;}

  @media print{
    body *{visibility:hidden;}
  }

  @media (max-width:900px){
    .body{flex-direction:column;}
    .rail{width:100%;flex:0 0 auto;display:flex;overflow-x:auto;padding:10px;}
    .rail-step{flex:0 0 auto;}
    .formpane,.previewpane{max-width:none;width:100%;}
  }