:root{
    --paper:#EDE6D6;
    --paper-deep:#E4DCC8;
    --card-bg:#F7F2E7;
    --ink:#23222A;
    --ink-soft:#5B5762;
    --pink:#E85D75;
    --pink-deep:#C7415A;
    --teal:#1F7A73;
    --teal-deep:#145951;
    --plum:#7A4A5E;
    --line:#C9BCA0;

    --font-display:'Fraunces', Georgia, serif;
    --font-sans:'IBM Plex Sans', -apple-system, sans-serif;
    --font-mono:'IBM Plex Mono', 'Courier New', monospace;
  }
  *,*::before,*::after{ box-sizing:border-box; }
  body{
    margin:0;
    font-family:var(--font-sans);
    color:var(--ink);
    background-color:var(--paper);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat:repeat;
    line-height:1.5;
  }
  ::selection{ background:var(--pink); color:var(--paper); }
  .hidden{ display:none !important; }
  .visually-hidden{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible{
    outline:2px solid var(--pink-deep); outline-offset:2px;
  }


  /* ---------- admin shell ---------- */
  .admin-header{
    display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem;
    border-bottom:1px solid var(--line);
    background:rgba(237,230,214,.85); backdrop-filter:blur(8px);
    flex-wrap:wrap; gap:.5rem;
  }
  .admin-title{ font-weight:600; font-family:var(--font-display); font-size:1.3rem; letter-spacing:-.01em; }
  .admin-header-links{ display:flex; gap:1.25rem; align-items:center; }
  .admin-header a{ color:var(--ink-soft); font-size:.85rem; font-weight:500; text-decoration:none; }
  .admin-header a:hover{ color:var(--ink); }
  .proto-badge{
    font-family:var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
    padding:.2rem .55rem; border-radius:999px; border:1px solid var(--line);
    color:var(--ink-soft); font-weight:500; white-space:nowrap;
  }

  .admin-main{ max-width:920px; margin:0 auto; padding:2rem 1.5rem 5rem; }
  body.is-canvas-tab .admin-main{ max-width:none; padding:0; }
  .studio-canvas-panel{ width:100%; height:calc(100vh - 116px); min-height:680px; }
  .canvas-frame{ display:block; width:100%; height:100%; border:0; background:var(--paper); }
  .admin-section-sub{ color:var(--ink-soft); font-size:.85rem; margin:0 0 1.25rem; max-width:64ch; }

  .admin-main h2{
    font-family:var(--font-display); font-weight:600; font-size:1.35rem; margin:0 0 .25rem;
  }
  .admin-main h3{
    font-family:var(--font-display); font-weight:600; font-size:1.05rem; margin:0 0 .25rem;
  }

  /* Manage tab — sections separated by a divider */
  .manage-section{ margin-bottom:2.5rem; }
  .section-divider{
    border:none; border-top:1px solid var(--line); margin:0 0 2.5rem;
  }

  fieldset{
    border:1px solid var(--line); border-radius:14px; padding:1.4rem; margin:0 0 1.25rem;
    background:var(--card-bg);
    box-shadow:0 10px 18px -14px rgba(35,34,42,.25);
  }
  legend{
    font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
    color:var(--pink-deep); padding:0 .5rem; font-weight:500;
  }
  fieldset > label{ display:block; font-size:.85rem; font-weight:500; color:var(--ink-soft); margin:0 0 .9rem; }
  fieldset > label:last-child{ margin-bottom:0; }
  label span.hint{ display:block; font-size:.78rem; font-weight:400; color:var(--ink-soft); margin-top:.2rem; }
  input[type="text"], input[type="url"], input[type="number"], input[type="password"], input[type="date"], select, textarea{
    display:block; width:100%; margin-top:.35rem; padding:.6rem .8rem; border:1px solid var(--line);
    border-radius:10px; font-size:.9rem; font-family:var(--font-sans); color:var(--ink); background:var(--paper);
  }
  input[type="text"]:hover, input[type="url"]:hover, input[type="number"]:hover, input[type="date"]:hover, select:hover, textarea:hover{
    border-color:var(--ink-soft);
  }
  textarea{ resize:vertical; min-height:4.5rem; }
  input[type="file"]{ display:block; width:100%; margin-top:.35rem; font-size:.85rem; }
  .row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:0 1rem; }

  .visibility{ margin-top:.9rem; }
  .visibility-legend{
    font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
    color:var(--ink-soft); font-weight:500; margin:0 0 .5rem;
  }
  .visibility label{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--ink); margin-bottom:.5rem; }
  .visibility input{ width:auto; margin:0; accent-color:var(--pink-deep); }

  .cover-field{ margin-top:1rem; }
  .cover-swatches{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.4rem; }
  .swatch{ width:2.4rem; height:2.4rem; border-radius:10px; border:2px solid transparent; cursor:pointer; padding:0; }
  .swatch.is-selected{ border-color:var(--ink); box-shadow:0 0 0 2px var(--card-bg), 0 0 0 4px var(--ink); }
  .cover-1{ background:linear-gradient(155deg, var(--teal) 0%, var(--plum) 100%); }
  .cover-2{ background:linear-gradient(160deg, #4C6E8C 0%, var(--card-bg) 130%); }
  .cover-3{ background:linear-gradient(150deg, var(--ink) 0%, #D9A441 120%); }
  .cover-4{ background:linear-gradient(155deg, var(--pink) 0%, #D9A441 100%); }
  .cover-5{ background:linear-gradient(145deg, var(--ink) 0%, var(--teal) 100%); }
  .cover-6{ background:linear-gradient(160deg, #7C8B6F 0%, var(--card-bg) 130%); }
  .cover-7{ background:linear-gradient(150deg, var(--plum) 0%, var(--pink-deep) 100%); }
  .cover-8{ background:linear-gradient(155deg, var(--teal-deep) 0%, var(--pink) 100%); }

  .avatar-upload-row{ display:flex; align-items:center; gap:1rem; margin:0 0 .9rem; flex-wrap:wrap; }
  .avatar-preview{
    width:64px; height:64px; border-radius:50%; flex:none;
    background:linear-gradient(155deg, var(--plum) 0%, var(--pink-deep) 100%);
    background-size:cover; background-position:center;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:600; font-size:1.5rem; color:var(--paper);
    box-shadow:inset 0 0 0 1px rgba(35,34,42,.08);
  }
  .avatar-upload-main{ flex:1; min-width:220px; }
  .avatar-upload-main .link-btn{ margin-top:.4rem; }

  .creator-select-row{ display:flex; gap:.75rem; align-items:flex-end; flex-wrap:wrap; }
  .creator-select-row .field{ flex:1; min-width:200px; }
  .inline-add-fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:0 1rem; margin-top:.9rem; padding-top:.9rem; border-top:1px dashed var(--line); }

  .save-btn{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.75rem 1.6rem; border-radius:999px; border:2px solid transparent;
    background:var(--pink); color:var(--paper); font-family:var(--font-sans);
    font-weight:600; font-size:.95rem; cursor:pointer;
    box-shadow:0 10px 24px -12px rgba(232,93,117,.6);
    transition:transform .2s ease, background .2s ease;
  }
  .save-btn:hover{ background:var(--pink-deep); transform:translateY(-2px); }
  .save-btn:disabled{ opacity:.6; cursor:default; transform:none; }
  .ghost-btn{
    display:inline-flex; align-items:center; gap:.4rem;
    padding:.7rem 1.4rem; border-radius:999px; border:2px solid var(--ink);
    background:transparent; color:var(--ink); font-family:var(--font-sans);
    font-weight:600; font-size:.9rem; cursor:pointer;
    transition:background .2s ease, color .2s ease;
  }
  .ghost-btn:hover{ background:var(--ink); color:var(--paper); }

  .result-box{
    background:var(--card-bg); border:1px solid var(--line); border-radius:14px; padding:1.5rem;
    margin-top:1.25rem;
    box-shadow:0 30px 60px -30px rgba(35,34,42,.35);
  }
  .result-code{
    font-family:var(--font-mono); font-size:1.5rem; letter-spacing:.05em; color:var(--pink-deep); margin:.4rem 0 1rem;
  }
  .result-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }
  .result-note{ font-size:.82rem; color:var(--ink-soft); margin-top:.9rem; }

  table{
    width:100%; border-collapse:collapse; font-size:.85rem; background:var(--card-bg);
    border:1px solid var(--line); border-radius:14px; overflow:hidden;
  }
  th, td{ text-align:left; padding:.65rem .8rem; border-bottom:1px solid var(--line); vertical-align:middle; }
  th{
    background:var(--paper-deep); font-family:var(--font-mono); font-weight:500; color:var(--ink-soft);
    font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  }
  tbody tr:last-child td{ border-bottom:none; }
  td a{ color:var(--ink); font-weight:600; text-decoration:none; }
  td a:hover{ color:var(--pink-deep); text-decoration:underline; }
  .badge{
    font-family:var(--font-mono); font-size:.68rem; letter-spacing:.04em; text-transform:uppercase;
    padding:.25rem .55rem; border-radius:999px; font-weight:500; white-space:nowrap;
    border:1px solid var(--line); background:var(--paper-deep); color:var(--ink-soft);
  }
  .badge.public{ background:var(--teal); color:var(--paper); border-color:var(--teal); }
  .badge.private{ background:var(--card-bg); color:var(--pink-deep); border-color:var(--pink-deep); }
  .badge.claimed{ background:var(--plum); color:var(--paper); border-color:var(--plum); }
  .badge.unclaimed{ background:var(--paper-deep); color:var(--ink-soft); }
  .row-code{ font-family:var(--font-mono); font-size:.8rem; white-space:nowrap; }
  .link-btn{ background:none; border:none; color:var(--ink-soft); font-family:var(--font-sans); font-size:.8rem; cursor:pointer; text-decoration:underline; padding:0; white-space:nowrap; }
  .link-btn:hover{ color:var(--pink-deep); }
  .actions-cell{ display:flex; gap:.75rem; flex-wrap:wrap; }
  .empty-row td{ color:var(--ink-soft); font-style:italic; }

  .creator-list{ display:flex; flex-direction:column; gap:.75rem; margin-top:1.25rem; }
  .creator-row{
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
    background:var(--card-bg); border:1px solid var(--line); border-radius:14px; padding:.9rem 1.1rem;
    box-shadow:0 10px 18px -14px rgba(35,34,42,.2);
  }
  .creator-row-avatar{
    width:40px; height:40px; border-radius:50%; flex:none;
    background:linear-gradient(155deg, var(--plum) 0%, var(--pink-deep) 100%);
    background-size:cover; background-position:center;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-display); font-weight:600; font-size:1rem; color:var(--paper);
  }
  .creator-row-main{ flex:1; min-width:180px; }
  .creator-row-main strong{ display:block; font-family:var(--font-display); font-weight:600; }
  .creator-row-main span{ font-size:.8rem; color:var(--ink-soft); }
  .creator-row-actions{ display:flex; gap:1rem; align-items:center; }
  .creator-row-actions a{ color:var(--ink-soft); font-size:.85rem; text-decoration:none; }
  .creator-row-actions a:hover{ color:var(--pink-deep); text-decoration:underline; }

  .toast{
    position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px);
    background:var(--ink); color:var(--paper); padding:.75rem 1.25rem; border-radius:999px;
    font-family:var(--font-sans); font-size:.9rem; opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease; z-index:100;
    box-shadow:0 10px 30px -10px rgba(0,0,0,.4); max-width:min(90vw, 420px); text-align:center;
  }
  .toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

  /* ---------- tabs ---------- */
  .tab-nav{
    display:flex; gap:.5rem; padding:1rem 1.5rem 0; max-width:920px; margin:0 auto;
    flex-wrap:wrap;
  }
  .tab-btn{
    font-family:var(--font-mono); font-size:.8rem; padding:.5rem 1rem; border-radius:999px;
    border:1px solid var(--line); background:var(--card-bg); color:var(--ink-soft); cursor:pointer;
    transition:background .2s ease, color .2s ease, border-color .2s ease;
  }
  .tab-btn:hover{ border-color:var(--ink-soft); color:var(--ink); }
  .tab-btn.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
  .tab-panel.hidden{ display:none; }

  .section-list-header{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 .25rem; flex-wrap:wrap; }
  .section-list-header h2, .section-list-header h3{ margin:0; }

  .hint-standalone{ font-size:.78rem; color:var(--ink-soft); margin:-.6rem 0 1.25rem; }

  /* ---------- books list (reuses creator-row/creator-list layout) ---------- */
  .book-row{
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
    background:var(--card-bg); border:1px solid var(--line); border-radius:14px; padding:.9rem 1.1rem;
    box-shadow:0 10px 18px -14px rgba(35,34,42,.2);
  }
  .book-row-main{ flex:1; min-width:220px; display:flex; flex-direction:column; gap:.3rem; }
  .book-row-main strong{ display:inline; font-family:var(--font-display); font-weight:600; }
  .book-row-main span{ font-size:.8rem; color:var(--ink-soft); }
  .book-row-actions{ display:flex; gap:1rem; align-items:center; }
  .badge.ready{ background:var(--teal); color:var(--paper); border-color:var(--teal); }
  .badge.draft{ background:var(--paper-deep); color:var(--ink-soft); }
  .badge.published{ background:var(--plum); color:var(--paper); border-color:var(--plum); }
  .badge.versions{ background:var(--card-bg); color:var(--plum); border-color:var(--plum); }

  /* ---------- publishing: book summary + cover upload ---------- */
  .publish-summary{
    background:var(--paper); border:1px solid var(--line); border-radius:10px;
    padding:.85rem 1rem; font-size:.85rem; line-height:1.5; margin-top:.5rem;
  }
  .cover-upload-row{ display:flex; align-items:center; gap:1rem; margin-top:.75rem; flex-wrap:wrap; }
  .cover-upload-label{ font-size:.85rem; color:var(--ink-soft); display:block; }
  .cover-upload-label input[type="file"]{ margin-top:.35rem; }
  .cover-upload-preview{
    width:2.4rem; height:2.4rem; border-radius:10px; flex:none;
    background-size:cover; background-position:center;
    border:2px solid var(--ink); box-shadow:0 0 0 2px var(--card-bg), 0 0 0 4px var(--ink);
  }

  /* ---------- creation: import from canvas ---------- */
  .canvas-import{
    background:var(--card-bg); border:1px solid var(--line); border-radius:14px;
    padding:1.4rem; margin:0 0 1.5rem;
    box-shadow:0 10px 18px -14px rgba(35,34,42,.25);
  }
  .canvas-import-title{
    font-family:var(--font-display); font-weight:600; font-size:1.05rem; margin:0 0 .35rem;
  }
  .canvas-import .admin-section-sub{ margin-bottom:.9rem; }
  .canvas-import-source-tabs{
    display:inline-flex; gap:.25rem; padding:.25rem; margin-bottom:1rem;
    border:1px solid var(--line); border-radius:999px; background:var(--paper-deep);
  }
  .canvas-import-source-btn{
    border:0; border-radius:999px; background:transparent; color:var(--ink-soft);
    padding:.45rem .9rem; font-weight:600; font-size:.8rem; cursor:pointer;
  }
  .canvas-import-source-btn:hover{ color:var(--ink); }
  .canvas-import-source-btn.is-active{ background:var(--ink); color:var(--paper); }
  .canvas-import-panel{
    border-top:1px solid var(--line); padding-top:1rem;
  }
  .canvas-library-heading{
    display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem;
  }
  .canvas-library-heading > div{ display:flex; flex-direction:column; gap:.15rem; }
  .canvas-library-heading strong{ font-size:.88rem; }
  .canvas-library-heading span,.canvas-computer-hint{ color:var(--ink-soft); font-size:.76rem; }
  .canvas-library-refresh{ flex:none; }
  .canvas-project-library{ display:grid; gap:.55rem; }
  .canvas-library-item{
    display:flex; align-items:center; gap:1rem; padding:.75rem .85rem;
    border:1px solid var(--line); border-radius:10px; background:var(--paper);
  }
  .canvas-library-item.is-selected{ border-color:var(--teal); box-shadow:0 0 0 1px var(--teal); }
  .canvas-library-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
  .canvas-library-name{ font-family:var(--font-display); font-weight:600; font-size:.9rem; }
  .canvas-library-meta{ color:var(--ink-soft); font-size:.75rem; }
  .canvas-library-use{
    flex:none; border:1px solid var(--ink); border-radius:999px; background:transparent;
    color:var(--ink); padding:.4rem .75rem; font-weight:600; font-size:.76rem; cursor:pointer;
  }
  .canvas-library-use:hover{ background:var(--ink); color:var(--paper); }
  .canvas-library-empty{
    margin:0; padding:.85rem; border:1px dashed var(--line); border-radius:10px;
    color:var(--ink-soft); font-size:.82rem;
  }
  .canvas-computer-hint{ margin:.65rem 0 0; }
  .canvas-import-status{
    margin-top:.9rem; padding:.65rem .85rem; border-radius:10px; font-size:.85rem; line-height:1.5;
  }
  .canvas-import-status.success{ background:#E4F3EF; color:var(--teal-deep); border:1px solid var(--teal); }
  .canvas-import-status.error{ background:#FBEAEC; color:#8A3A46; border:1px solid var(--pink-deep); }

  /* ---------- project properties, library, and review workflow ---------- */
  .workflow-heading{ margin-bottom:1.35rem; }
  .workflow-heading .admin-section-sub{ margin-bottom:0; }
  .workflow-eyebrow{
    display:block; margin-bottom:.35rem; color:var(--pink-deep); font-family:var(--font-mono);
    font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  }
  .project-properties-form{ max-width:760px; }
  .workflow-summary{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:.75rem;
    margin:0 0 1.25rem;
  }
  .workflow-stat{
    min-height:92px; padding:1rem; text-align:left; border:1px solid var(--line); border-radius:14px;
    background:var(--card-bg); color:var(--ink); cursor:pointer;
    box-shadow:0 10px 18px -14px rgba(35,34,42,.2);
  }
  .workflow-stat:hover{ border-color:var(--ink-soft); transform:translateY(-1px); }
  .workflow-stat strong{ display:block; font-family:var(--font-display); font-size:1.6rem; line-height:1; }
  .workflow-stat span{ display:block; margin-top:.45rem; color:var(--ink-soft); font-size:.78rem; }
  .workflow-stat.ready{ border-top:4px solid var(--teal); }
  .workflow-stat.draft{ border-top:4px solid var(--line); }
  .workflow-stat.versions{ border-top:4px solid var(--pink); }
  .workflow-stat.published{ border-top:4px solid var(--plum); }
  .workflow-view-tabs{
    display:inline-flex; gap:.25rem; padding:.25rem; margin:0 0 1rem;
    border:1px solid var(--line); border-radius:999px; background:var(--paper-deep);
  }
  .workflow-view-btn{
    border:0; border-radius:999px; background:transparent; color:var(--ink-soft);
    padding:.5rem 1rem; font-family:var(--font-sans); font-size:.8rem; font-weight:600; cursor:pointer;
  }
  .workflow-view-btn:hover{ color:var(--ink); }
  .workflow-view-btn.is-active{ background:var(--ink); color:var(--paper); }
  .workflow-list{ display:flex; flex-direction:column; gap:.75rem; }
  .workflow-item{
    display:flex; align-items:center; gap:1rem; padding:1rem 1.1rem;
    border:1px solid var(--line); border-radius:14px; background:var(--card-bg);
    box-shadow:0 10px 18px -14px rgba(35,34,42,.2);
  }
  .workflow-item-main{ flex:1; min-width:220px; }
  .workflow-item-title{ display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; }
  .workflow-item-title strong{ font-family:var(--font-display); font-size:1rem; font-weight:600; }
  .workflow-item p{ margin:.2rem 0 0; color:var(--ink-soft); font-size:.78rem; }
  .workflow-item-actions{ display:flex; align-items:center; justify-content:flex-end; gap:.55rem; flex-wrap:wrap; }
  .workflow-item-actions .save-btn,.workflow-item-actions .ghost-btn{ padding:.5rem .85rem; font-size:.78rem; }
  .workflow-project-link{ width:100%; text-align:right; }
  .workflow-published-date{ color:var(--ink-soft); font-size:.78rem; }
  .workflow-empty{
    margin:0; padding:1.2rem; border:1px dashed var(--line); border-radius:14px;
    background:rgba(247,242,231,.45); color:var(--ink-soft); font-size:.85rem;
  }
  .review-list-header{ margin-top:.2rem; margin-bottom:.75rem; }

  @media (max-width:560px){
    .canvas-library-item{ align-items:flex-start; flex-direction:column; }
    .canvas-library-use{ width:100%; }
    .workflow-item{ align-items:flex-start; flex-direction:column; }
    .workflow-item-actions{ width:100%; justify-content:flex-start; }
    .workflow-project-link{ text-align:left; }
    .workflow-view-tabs{ display:flex; width:100%; }
    .workflow-view-btn{ flex:1; padding:.5rem .45rem; }
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  }