:root{
    --ink:#1C1A17;
    --ink-2:#272320;
    --bone:#F2EDE4;
    --plaster:#E4DACB;
    --line:#3A352F;
    --line-light:#D8CEBF;
    --sage:#7B8E74;
    --sage-deep:#5B6B5A;
    --brass:#B08D57;
    --muted:#A89E8F;
    --white:#ffffff;
    --r:14px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  /* Clamp the page horizontally so a stray-wide child can never let the whole
     view pan sideways. overflow-x:clip (not hidden) keeps position:sticky working. */
  html,body{margin:0; height:100%; width:100%; max-width:100%; overflow-x:clip;}
  body{
    background:var(--ink);
    color:var(--bone);
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    font-size:15px;
    -webkit-font-smoothing:antialiased;
    overscroll-behavior:none;
    -webkit-text-size-adjust:100%; text-size-adjust:100%;
  }
  .app{
    max-width:520px;
    margin:0 auto;
    min-height:100%;
    display:flex;
    flex-direction:column;
    position:relative;
  }

  /* ---- Top bar ---- */
  .topbar{
    position:sticky; top:0; z-index:20;
    padding:calc(var(--safe-t) + 12px) 18px 12px;
    display:flex; align-items:center; justify-content:space-between;
    background:linear-gradient(var(--ink), rgba(28,26,23,0.86));
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
  }
  .brand{display:flex; align-items:baseline; gap:8px;}
  .brand .mark{
    font-family:'Fraunces',serif; font-weight:900; font-size:22px;
    letter-spacing:-0.5px; color:var(--bone);
  }
  .brand .sub{font-size:11px; color:var(--muted); letter-spacing:.14em; text-transform:uppercase;}
  .export-btn{
    appearance:none; border:none; cursor:pointer;
    background:var(--sage); color:#10130f;
    font-family:'Inter'; font-weight:700; font-size:14px;
    padding:10px 16px; border-radius:999px;
    display:flex; align-items:center; gap:7px;
  }
  .export-btn:active{transform:scale(.96);}
  .export-btn svg{width:15px;height:15px;}

  /* ---- Stage ---- */
  .stage{
    padding:16px 16px 8px;
    display:flex; flex-direction:column; align-items:center; gap:12px;
  }
  .canvas-wrap{
    position:relative;
    display:flex; align-items:center; justify-content:center;
    width:100%;
  }
  #preview{
    display:block; border-radius:10px; max-width:100%; height:auto;
    box-shadow:0 18px 40px -16px rgba(0,0,0,.7), 0 0 0 1px var(--line);
    background:var(--plaster);
  }
  .empty-hint{
    position:absolute; inset:0; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:10px; text-align:center;
    color:var(--ink); pointer-events:none; padding:24px;
  }
  .empty-hint .ico{width:40px;height:40px;opacity:.5;}
  .empty-hint p{margin:0;font-size:13px;max-width:200px;color:#5b554c;line-height:1.4;}

  /* format chips */
  .formats{display:flex; gap:8px; width:100%; overflow-x:auto; padding:2px 0; scrollbar-width:none;}
  .formats::-webkit-scrollbar{display:none;}
  .chip{
    flex:0 0 auto; cursor:pointer; user-select:none;
    border:1px solid var(--line); background:var(--ink-2); color:var(--muted);
    padding:8px 13px; border-radius:10px; font-size:12.5px; font-weight:500;
    display:flex; align-items:center; gap:7px;
  }
  .chip .glyph{width:14px; border:1.5px solid currentColor; border-radius:2px;}
  .chip[data-f="square"] .glyph{height:14px;}
  .chip[data-f="portrait"] .glyph{height:17px;}
  .chip[data-f="story"] .glyph{height:20px; width:11px;}
  .chip[data-f="landscape"] .glyph{height:8px; width:18px;}
  .chip.active{background:var(--bone); color:var(--ink); border-color:var(--bone);}

  /* ---- Panel ---- */
  .panel{
    flex:1; background:var(--ink-2);
    border-top:1px solid var(--line);
    border-radius:22px 22px 0 0;
    margin-top:4px;
    padding:18px 18px calc(96px + var(--safe-b));
    min-height:300px;
  }
  .panel h2{
    font-family:'Inter'; font-size:12px; font-weight:700; letter-spacing:.13em;
    text-transform:uppercase; color:var(--muted); margin:0 0 14px;
  }
  .tabview{display:none;}
  .tabview.active{display:block; animation:fade .2s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

  .field{margin-bottom:16px;}
  .field > label{display:block; font-size:12px; color:var(--muted); margin-bottom:7px; font-weight:500;}
  .input, textarea, select{
    width:100%; appearance:none;
    background:var(--ink); color:var(--bone);
    border:1px solid var(--line); border-radius:11px;
    padding:12px 13px; font-family:'Inter'; font-size:15px;
    outline:none;
  }
  textarea{resize:vertical; min-height:64px; line-height:1.4;}
  .input:focus, textarea:focus, select:focus{border-color:var(--sage);}
  select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23A89E8F' stroke-width='1.5' fill='none'/></svg>"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px;}

  .upload{
    border:1.5px dashed var(--line); border-radius:13px; padding:18px;
    text-align:center; cursor:pointer; color:var(--muted); font-size:13.5px;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    background:rgba(123,142,116,.04);
  }
  .upload:active{border-color:var(--sage);}
  .upload svg{width:24px;height:24px;opacity:.6;}
  .upload.has{border-style:solid; border-color:var(--sage); color:var(--sage); background:rgba(123,142,116,.08);}

  .row{display:flex; gap:10px;}
  /* min-width:0 lets inputs/selects shrink below their intrinsic size instead of
     forcing the row (and the page) wider than the screen. */
  .row > *{flex:1 1 0; min-width:0;}
  .row .input, .row select, .row textarea{min-width:0;}

  .slider-row{display:flex; align-items:center; gap:12px;}
  input[type=range]{
    -webkit-appearance:none; appearance:none; height:4px; border-radius:4px;
    background:var(--line); flex:1; outline:none;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
    background:var(--bone); border:2px solid var(--sage); cursor:pointer;
  }
  input[type=range]::-moz-range-thumb{
    width:20px;height:20px;border-radius:50%;background:var(--bone);
    border:2px solid var(--sage);cursor:pointer;
  }

  .seg{display:flex; gap:6px; background:var(--ink); border:1px solid var(--line); border-radius:11px; padding:4px;}
  .seg button{
    flex:1; appearance:none; border:none; cursor:pointer; background:transparent;
    color:var(--muted); font-family:'Inter'; font-weight:600; font-size:13px;
    padding:8px 6px; border-radius:8px;
  }
  .seg button.on{background:var(--sage); color:#10130f;}

  .swatches{display:flex; gap:10px; flex-wrap:wrap;}
  .sw{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid transparent; position:relative;}
  .sw.on{border-color:var(--bone);}
  .sw.on::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;text-shadow:0 1px 2px rgba(0,0,0,.6);}
  .color-input{width:34px;height:34px;padding:0;border-radius:50%;border:2px solid var(--line);overflow:hidden;background:none;cursor:pointer;}
  .color-input::-webkit-color-swatch-wrapper{padding:0;}
  .color-input::-webkit-color-swatch{border:none;border-radius:50%;}

  .fontpick{display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none;}
  .fontpick::-webkit-scrollbar{display:none;}
  .fontpick .fp{
    flex:0 0 auto; cursor:pointer; padding:10px 14px; border-radius:11px;
    border:1px solid var(--line); background:var(--ink); color:var(--bone);
    font-size:18px; line-height:1; white-space:nowrap;
  }
  .fontpick .fp small{display:block;font-size:9px;color:var(--muted);font-family:'Inter';margin-top:3px;letter-spacing:.08em;text-transform:uppercase;}
  .fontpick .fp.on{border-color:var(--sage); background:rgba(123,142,116,.1);}

  /* AI copy */
  .ai-btn{
    width:100%; appearance:none; border:none; cursor:pointer;
    background:var(--brass); color:#1b140a; font-family:'Inter'; font-weight:700;
    font-size:15px; padding:14px; border-radius:12px; margin-top:4px;
    display:flex; align-items:center; justify-content:center; gap:9px;
  }
  .ai-btn:active{transform:scale(.99);}
  .ai-btn[disabled]{opacity:.55; cursor:default;}
  .ai-btn svg{width:17px;height:17px;}
  .ai-results{margin-top:16px; display:flex; flex-direction:column; gap:11px;}
  .ai-card{
    border:1px solid var(--line); border-radius:13px; padding:14px;
    background:var(--ink); cursor:pointer; transition:border-color .15s;
  }
  .ai-card:active{border-color:var(--brass);}
  .ai-card .hl{font-family:'Fraunces';font-weight:600;font-size:17px;color:var(--bone);margin-bottom:3px;line-height:1.2;}
  .ai-card .sl{font-size:13px;color:var(--muted);margin-bottom:9px;}
  .ai-card .cap{font-size:12.5px;color:#8c8478;line-height:1.45;border-top:1px solid var(--line);padding-top:9px;}
  .ai-card .apply{margin-top:9px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);}
  .ai-note{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.45;}
  .spinner{width:16px;height:16px;border:2px solid rgba(0,0,0,.25);border-top-color:#1b140a;border-radius:50%;animation:spin .7s linear infinite;}
  @keyframes spin{to{transform:rotate(360deg);}}

  /* ---- Tab bar ---- */
  .tabbar{
    position:fixed; bottom:0; left:0; right:0; z-index:30;
    max-width:520px; margin:0 auto;
    display:flex; background:rgba(28,26,23,0.92); backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    padding:8px 8px calc(8px + var(--safe-b));
  }
  .tabbar button{
    flex:1; appearance:none; border:none; background:transparent; cursor:pointer;
    color:var(--muted); display:flex; flex-direction:column; align-items:center; gap:4px;
    font-family:'Inter'; font-size:10.5px; font-weight:600; letter-spacing:.02em;
    padding:6px 0;
  }
  .tabbar button svg{width:21px;height:21px;}
  .tabbar button.on{color:var(--sage);}

  /* ---- Export modal ---- */
  .modal{
    position:fixed; inset:0; z-index:60; display:none;
    background:rgba(10,9,8,.82); backdrop-filter:blur(6px);
    align-items:center; justify-content:center; padding:24px;
  }
  .modal.show{display:flex;}
  .modal-card{
    background:var(--ink-2); border:1px solid var(--line); border-radius:20px;
    padding:18px; max-width:380px; width:100%; max-height:88dvh; overflow:auto;
    display:flex; flex-direction:column; gap:14px;
  }
  .modal-card h3{margin:0;font-family:'Fraunces';font-weight:600;font-size:20px;}
  .modal-card img{width:100%;border-radius:10px;border:1px solid var(--line);}
  .modal-actions{display:flex; gap:10px;}
  .modal-actions a, .modal-actions button{
    flex:1; text-align:center; text-decoration:none; cursor:pointer;
    padding:13px; border-radius:12px; font-family:'Inter'; font-weight:700; font-size:14px;
    border:1px solid var(--line);
  }
  .btn-primary{background:var(--sage); color:#10130f; border-color:var(--sage)!important;}
  .btn-ghost{background:transparent; color:var(--bone);}
  .modal-hint{font-size:12px;color:var(--muted);line-height:1.5;text-align:center;}

  .hidden{display:none!important;}