/* V1.3.0 — High-clarity neumorphic design layer. CSS only; no generated images. */
:root{
  --bg:#e7ece9;--surface:#e7ece9;--surface-2:#dfe6e2;--surface-3:#d7e0db;
  --text:#1d2924;--muted:#68736d;--line:rgba(74,91,82,.18);
  --primary:#22674f;--primary-2:#d4e8df;--on-primary:#f8fffb;
  --accent:#b96c43;--accent-2:#f0dcd0;--danger:#a23f43;--danger-bg:#efd9da;--success:#2c7457;
  --neu-light:rgba(255,255,255,.92);--neu-dark:rgba(139,153,146,.46);
  --neu-raised:10px 10px 24px var(--neu-dark),-10px -10px 24px var(--neu-light);
  --neu-raised-sm:5px 5px 12px var(--neu-dark),-5px -5px 12px var(--neu-light);
  --neu-raised-xs:3px 3px 7px rgba(139,153,146,.38),-3px -3px 7px rgba(255,255,255,.84);
  --neu-inset:inset 5px 5px 12px rgba(139,153,146,.42),inset -5px -5px 12px rgba(255,255,255,.8);
  --neu-inset-sm:inset 3px 3px 7px rgba(139,153,146,.38),inset -3px -3px 7px rgba(255,255,255,.75);
  --shadow:var(--neu-raised);--radius-sm:12px;--radius:20px;--radius-lg:30px;
  --font-ui:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
body.dark{
  --bg:#1a211e;--surface:#1a211e;--surface-2:#202a26;--surface-3:#26322d;
  --text:#eef5f1;--muted:#a9b6af;--line:rgba(221,239,230,.11);
  --primary:#82c8aa;--primary-2:#233d32;--on-primary:#112019;
  --accent:#e1a17c;--accent-2:#493127;--danger:#f09b9e;--danger-bg:#48292c;--success:#89d2b1;
  --neu-light:rgba(255,255,255,.05);--neu-dark:rgba(0,0,0,.56);
  --neu-raised:10px 10px 24px var(--neu-dark),-10px -10px 24px var(--neu-light);
  --neu-raised-sm:5px 5px 12px rgba(0,0,0,.52),-5px -5px 12px rgba(255,255,255,.045);
  --neu-raised-xs:3px 3px 7px rgba(0,0,0,.46),-3px -3px 7px rgba(255,255,255,.04);
  --neu-inset:inset 5px 5px 12px rgba(0,0,0,.55),inset -5px -5px 12px rgba(255,255,255,.04);
  --neu-inset-sm:inset 3px 3px 7px rgba(0,0,0,.5),inset -3px -3px 7px rgba(255,255,255,.035);
  --shadow:var(--neu-raised);color-scheme:dark;
}
html{background:var(--bg)}
body{background:var(--bg);letter-spacing:-.005em}
::selection{background:var(--primary-2);color:var(--text)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 42%,transparent);outline-offset:3px}

/* Shell */
.app-shell{background:var(--bg)}
.sidebar{background:var(--bg);border-right:0;box-shadow:12px 0 28px rgba(139,153,146,.28),-8px 0 20px rgba(255,255,255,.58);padding:24px 20px}
body.dark .sidebar{box-shadow:12px 0 28px rgba(0,0,0,.45),-6px 0 18px rgba(255,255,255,.025)}
.brand-block{padding:4px 8px 26px}
.brand-mark{width:48px;height:48px;border-radius:16px;background:var(--primary);color:var(--on-primary);box-shadow:var(--neu-raised-sm);text-shadow:0 1px 0 rgba(0,0,0,.08)}
.brand-name{font-size:16px}.brand-sub{font-size:11px;font-weight:700;letter-spacing:.025em}
.nav-list{gap:10px}
.nav-item{background:var(--bg);border:0;border-radius:15px;padding:12px 13px;color:var(--muted);box-shadow:none;transition:transform .16s ease,box-shadow .16s ease,color .16s ease}
.nav-item:hover{background:var(--bg);color:var(--text);box-shadow:var(--neu-raised-xs);transform:translateY(-1px)}
.nav-item.active{background:var(--bg);color:var(--primary);box-shadow:var(--neu-inset-sm);transform:none}
.nav-icon{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:var(--bg);box-shadow:var(--neu-raised-xs);font-size:12px}
.nav-item.active .nav-icon{box-shadow:var(--neu-inset-sm);background:var(--primary-2)}
.sidebar-footer{border-top:0;padding-top:19px;position:relative}.sidebar-footer::before{content:'';display:block;height:8px;border-radius:999px;box-shadow:var(--neu-inset-sm);margin-bottom:18px}
.engine-badge{padding:10px 11px;border-radius:13px;box-shadow:var(--neu-inset-sm)}
.topbar{background:color-mix(in srgb,var(--bg) 86%,transparent);border-bottom:0;box-shadow:0 10px 24px rgba(116,132,123,.18);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body.dark .topbar{box-shadow:0 10px 25px rgba(0,0,0,.35)}
.page-root{padding:34px 32px 42px}
.section{margin-bottom:34px}.section-head{margin-bottom:18px}.section-head h2{font-size:19px}

/* Raised surfaces */
.card,.hero,.output-shell,.modal-card,.table-wrap,.code-group,.intelligence-bank{background:var(--bg);border:0;box-shadow:var(--neu-raised)}
.card{border-radius:var(--radius);padding:20px}.card.flat{box-shadow:var(--neu-inset-sm);background:var(--bg)}
.card:hover{border-color:transparent}
.metric-card{min-height:138px}.metric-label{letter-spacing:.075em}.metric-value{color:var(--primary)}
.hero{border-radius:var(--radius-lg);padding:32px;overflow:hidden;position:relative}
.hero::after{content:'';position:absolute;right:-62px;bottom:-72px;width:210px;height:210px;border-radius:50%;box-shadow:var(--neu-inset);opacity:.72;pointer-events:none}
.hero h2{font-size:34px;position:relative;z-index:1}.hero p,.hero .row{position:relative;z-index:1}
.hero-visual{background:var(--bg);border:0;box-shadow:var(--neu-inset);border-radius:24px;position:relative;z-index:1}
.mock-line{background:var(--surface-2);box-shadow:var(--neu-inset-sm)}.mock-line.primary{background:var(--primary);box-shadow:none}
.product-card{transition:transform .18s ease,box-shadow .18s ease}.product-card:hover{transform:translateY(-3px);box-shadow:14px 14px 30px var(--neu-dark),-14px -14px 30px var(--neu-light)}
.generator-panel{background:var(--bg)}
.output-shell{border-radius:var(--radius-lg)}
.output-block,.health-item,.code-check,.code-card,.preset-card,.prompt-library-card,.strategy-card,.audit-row,.note-box,.warning-box,.danger-box,.product-bank-counts span,.intelligence-group,.brand-preview{background:var(--bg);border:0;box-shadow:var(--neu-inset-sm)}
.output-block{border-radius:16px;padding:16px}.output-block h4{color:var(--primary)}
.brand-preview{border-left:0;border-radius:15px;padding:16px 18px}
.team-grid .card{overflow:visible}.team-code{opacity:.16}

/* Buttons */
.primary-button,.secondary-button,.ghost-button,.danger-button,.icon-button,.mini-button,.output-tab,.suggestion-chip,.strategy-list button,.preset-card,.prompt-library-card{border:0;background:var(--bg);box-shadow:var(--neu-raised-sm);transition:transform .14s ease,box-shadow .14s ease,color .14s ease,background .14s ease}
.primary-button{background:var(--primary);color:var(--on-primary);box-shadow:6px 6px 14px var(--neu-dark),-6px -6px 14px var(--neu-light)}
.secondary-button{background:var(--bg);color:var(--primary)}
.ghost-button{background:var(--bg)}
.danger-button{background:var(--danger-bg);color:var(--danger)}
.icon-button{background:var(--bg);border-radius:13px}
.mini-button{border-radius:10px}.text-button{color:var(--primary)}
.primary-button:hover,.secondary-button:hover,.ghost-button:hover,.danger-button:hover,.icon-button:hover,.mini-button:hover,.output-tab:hover,.suggestion-chip:hover,.strategy-list button:hover,.preset-card:hover,.prompt-library-card:hover{transform:translateY(-2px);background:var(--bg);box-shadow:7px 7px 16px var(--neu-dark),-7px -7px 16px var(--neu-light)}
.primary-button:hover{background:color-mix(in srgb,var(--primary) 90%,white);color:var(--on-primary)}
.primary-button:active,.secondary-button:active,.ghost-button:active,.danger-button:active,.icon-button:active,.mini-button:active,.output-tab:active,.suggestion-chip:active,.strategy-list button:active,.preset-card:active,.prompt-library-card:active{transform:translateY(0);box-shadow:var(--neu-inset-sm)}
.primary-button:active{background:var(--primary);color:var(--on-primary)}
.primary-button:disabled,.secondary-button:disabled{box-shadow:var(--neu-inset-sm)}
.output-tab.active{background:var(--bg);color:var(--primary);box-shadow:var(--neu-inset-sm)}

/* Forms */
.field{gap:9px}.field label{font-size:11px;letter-spacing:.035em;text-transform:uppercase}
.field input,.field select,.field textarea,.search-box input,.filter-row select{background:var(--bg);border:0;color:var(--text);border-radius:14px;box-shadow:var(--neu-inset);padding:12px 14px}
.field textarea{min-height:104px}
.field input:focus,.field select:focus,.field textarea:focus,.search-box input:focus,.filter-row select:focus{border:0;box-shadow:var(--neu-inset),0 0 0 3px color-mix(in srgb,var(--primary) 24%,transparent)}
.search-box input{padding-left:42px}.search-box::before{left:15px;top:9px;color:var(--primary)}
.check-row input,.code-check input{accent-color:var(--primary)}

/* Pills and status */
.chip,.badge,.field-count{border:0;box-shadow:var(--neu-raised-xs);background:var(--bg)}
.chip.primary,.field-count,.badge.used{background:var(--primary-2);color:var(--primary);box-shadow:var(--neu-inset-sm)}
.chip.accent,.badge.saved{background:var(--accent-2);color:var(--accent);box-shadow:var(--neu-inset-sm)}
.chip.success{box-shadow:var(--neu-inset-sm)}
.product-bank-counts{gap:10px}.product-bank-counts span{padding:10px 5px;border-radius:13px}
.suggestion-chip{border-radius:999px;padding:8px 12px}.suggestion-chip:disabled{box-shadow:var(--neu-inset-sm)}

/* Data, progress, tabs */
.table-wrap{border-radius:18px;padding:5px}.data-table{background:transparent}.data-table th{background:var(--bg);color:var(--muted);box-shadow:inset 0 -2px 0 var(--line)}.data-table td{border-bottom:1px solid var(--line)}
.progress-track{background:var(--bg);box-shadow:var(--neu-inset-sm);height:10px}.progress-fill{background:var(--primary);box-shadow:0 0 10px color-mix(in srgb,var(--primary) 40%,transparent)}
.health-item{border-radius:15px;padding:16px 9px}.health-item strong{color:var(--primary)}
.output-tabs,.zack-tabs{gap:10px}.output-tab{padding:9px 13px;border-radius:12px}
.hook-item{border-bottom:0;margin-bottom:8px;padding:13px 14px 13px 48px;border-radius:14px;box-shadow:var(--neu-inset-sm)}
.hook-item::before{left:12px;top:11px;background:var(--bg);box-shadow:var(--neu-raised-xs)}
.stat-row,.rule-block{border-bottom:0;box-shadow:inset 0 -1px 0 var(--line)}

/* Zack and intelligence */
.code-group{border-radius:16px;overflow:hidden}.code-group summary{padding:14px 16px}.code-check-grid{padding:2px 14px 14px;gap:12px}.code-check{border-radius:13px;padding:11px}
.prompt-output{background:var(--bg);border:0;box-shadow:var(--neu-inset);border-radius:16px;padding:17px}
.preset-card,.prompt-library-card,.code-card,.strategy-card,.audit-row{border-radius:14px;padding:13px}
.intelligence-bank{border-radius:18px;overflow:hidden}.intelligence-bank summary{padding:16px 18px}.intelligence-groups{padding:2px 18px 18px}.intelligence-group{padding:14px;border-radius:15px}
.note-box,.warning-box,.danger-box{border-radius:14px;padding:14px 16px}

/* Modal, toast, scrollbar */
.modal-host{background:rgba(14,22,18,.42);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.modal-card{border-radius:28px;overflow:auto}.modal-head{background:var(--bg);border-bottom:0;box-shadow:0 8px 18px rgba(126,143,134,.16)}
body.dark .modal-head{box-shadow:0 8px 18px rgba(0,0,0,.3)}
.modal-actions{border-top:0;box-shadow:inset 0 2px 0 color-mix(in srgb,var(--line) 70%,transparent)}
.toast{background:var(--bg);color:var(--text);box-shadow:var(--neu-raised);border-left:4px solid var(--primary);border-radius:15px}
*{scrollbar-width:thin;scrollbar-color:var(--primary) transparent}
*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--primary) 55%,var(--bg));border:3px solid var(--bg);border-radius:999px}

@media(max-width:1080px){.page-root{padding:26px 22px 36px}.hero::after{opacity:.45}}
@media(max-width:780px){
  .sidebar{box-shadow:var(--neu-raised);border-radius:0 24px 24px 0}
  .topbar{box-shadow:0 8px 18px rgba(116,132,123,.18)}
  .page-root{padding:20px 16px 34px}.card{padding:17px}.hero{padding:23px;border-radius:24px}.hero h2{font-size:27px}
  .grid{gap:16px}.section{margin-bottom:27px}.product-card:hover{transform:none;box-shadow:var(--neu-raised)}
  .modal-card{border-radius:22px}.suggestion-chip{width:100%;border-radius:13px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}


/* V1.4.0 — Syakila review and read-aloud simulation */
.syakila-inline{display:inline-grid;place-items:center;min-width:42px;padding:5px 8px;border-radius:999px;color:var(--primary);background:var(--bg);box-shadow:var(--neu-inset-sm);font-size:11px;letter-spacing:.04em}
.syakila-review{display:grid;gap:18px}
.syakila-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px;border-radius:22px;background:var(--bg);box-shadow:var(--neu-inset)}
.syakila-summary h4{margin:4px 0 6px;font-size:22px;color:var(--primary)}
.syakila-summary p{margin:0;color:var(--muted);max-width:680px}
.syakila-score{width:112px;height:112px;border-radius:50%;display:grid;place-content:center;text-align:center;flex:0 0 auto;background:var(--bg);box-shadow:var(--neu-raised-sm)}
.syakila-score strong{font-size:34px;line-height:1;color:var(--primary)}.syakila-score span{font-size:11px;color:var(--muted)}.syakila-score small{display:block;margin-top:5px;color:var(--muted)}
.syakila-check-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.syakila-check{display:flex;gap:10px;padding:14px;border-radius:16px;background:var(--bg);box-shadow:var(--neu-raised-xs)}
.syakila-check>span{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;font-weight:800}.syakila-check.pass>span{background:var(--primary-2);color:var(--primary)}.syakila-check.check>span{background:var(--accent-2);color:var(--accent)}
.syakila-check strong{display:block;font-size:12px}.syakila-check small{display:block;margin-top:3px;line-height:1.35;color:var(--muted)}
.before-after-grid,.syakila-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.inset-block{box-shadow:var(--neu-inset-sm)!important}.approved-block{box-shadow:var(--neu-raised-sm)!important;border-left:4px solid var(--primary)!important}
.syakila-list{display:grid;gap:9px}.syakila-list>div{display:flex;gap:9px;align-items:flex-start;color:var(--muted);line-height:1.45}.syakila-list span{color:var(--primary);font-weight:800}
@media(max-width:1100px){.syakila-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.syakila-summary{align-items:flex-start}.syakila-score{width:84px;height:84px}.syakila-score strong{font-size:27px}.before-after-grid,.syakila-detail-grid,.syakila-check-grid{grid-template-columns:1fr}.output-tabs{overflow-x:auto;flex-wrap:nowrap}.output-tab{white-space:nowrap}}

/* V1.4.0 mobile containment */
.generator-layout,.generator-panel,.output-shell,.syakila-review,.output-tabs{min-width:0;max-width:100%}.output-tabs{scrollbar-width:thin}.output-content{overflow-wrap:anywhere;word-break:normal}


/* V1.5.0 — Nene paragraph-flow layer */
.output-content{line-height:1.72;max-width:76ch}
.nene-inline{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:var(--accent-2);color:var(--accent);font-size:10px;letter-spacing:.04em}
.nene-review{display:grid;gap:16px}.nene-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px;border-radius:18px;background:var(--bg);box-shadow:var(--neu-raised-sm)}
.nene-summary h4{margin:5px 0 6px;font-family:var(--font-display);font-size:20px}.nene-summary p{margin:0;color:var(--muted);line-height:1.5}
.nene-score{width:96px;height:96px;border-radius:30px;display:grid;place-content:center;text-align:center;flex:0 0 auto;background:var(--bg);box-shadow:var(--neu-inset-md)}.nene-score strong{font-size:30px;line-height:1}.nene-score span,.nene-score small{color:var(--muted);font-size:11px}.nene-score small{display:block;margin-top:3px}
.nene-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.nene-metrics>div{padding:14px;border-radius:16px;text-align:center;background:var(--bg);box-shadow:var(--neu-inset-sm)}.nene-metrics strong{display:block;font-size:20px}.nene-metrics span{display:block;margin-top:4px;color:var(--muted);font-size:10px;line-height:1.3}
.nene-check-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.nene-check{display:flex;gap:10px;align-items:flex-start;padding:13px;border-radius:16px;background:var(--bg);box-shadow:var(--neu-raised-xs)}.nene-check>span{width:25px;height:25px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;font-weight:800}.nene-check.pass>span{background:var(--primary-2);color:var(--primary)}.nene-check.check>span{background:var(--accent-2);color:var(--accent)}.nene-check strong{display:block;font-size:11px}.nene-check small{display:block;margin-top:3px;color:var(--muted);font-size:10px;line-height:1.35}
.nene-approved{border-left-color:var(--accent)!important}.nene-list{display:grid;gap:9px}.nene-list>div{display:flex;gap:9px;align-items:flex-start;color:var(--muted);line-height:1.45}.nene-list span{color:var(--accent);font-weight:800}
@media(max-width:1100px){.nene-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.nene-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.nene-summary{align-items:flex-start}.nene-score{width:82px;height:82px;border-radius:26px}.nene-score strong{font-size:26px}.nene-check-grid,.nene-metrics{grid-template-columns:1fr 1fr}}