/* ============================================================
   Marketing Analyzer — ForeToday design system
   "A Better Tomorrow Starts Today"
   ============================================================ */

@font-face{
  font-family:"Outfit";
  src:url("../fonts/Outfit-VariableFont_wght.ttf") format("truetype-variations"),
      url("../fonts/Outfit-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Noto Sans Thai";
  src:url("../fonts/NotoSansThai-VariableFont_wdth_wght.ttf") format("truetype-variations"),
      url("../fonts/NotoSansThai-VariableFont_wdth_wght.ttf") format("truetype");
  font-weight:100 900;font-stretch:62.5% 100%;font-style:normal;font-display:swap;
}

:root{
  /* Brand */
  --ft-deep-orange:#ff582d;
  --ft-mid-orange:#fe6d00;
  --ft-gold:#ffab24;
  --ft-charcoal:#2d2b2b;
  --ft-white:#f7f7f7;
  --ft-gradient:linear-gradient(135deg,#ff582d 0%,#fe6d00 50%,#ffab24 100%);
  --ft-gradient-h:linear-gradient(90deg,#ff582d 0%,#fe6d00 50%,#ffab24 100%);

  /* Semantic — light */
  --bg:#f7f7f7;
  --panel:#ffffff;
  --inset:#efeeec;
  --border:rgba(45,43,43,.08);
  --border-strong:rgba(45,43,43,.16);
  --text:#2d2b2b;
  --text-2:rgba(45,43,43,.72);
  --muted:rgba(45,43,43,.56);
  --faint:rgba(45,43,43,.32);
  --primary:var(--ft-deep-orange);
  --primary-dark:#e8481f;
  --accent:var(--ft-gold);
  --tint:#fff3ec;            /* warm orange tint surface */
  --tint-2:#fff8ea;          /* gold tint surface */
  --tint-text:#c2410c;       /* orange text on tint */
  --good:#2f7a4b;  --good-bg:#e9f4ec;
  --warn:#a15c00;  --warn-bg:#fff4dc;
  --bad:#b4321a;   --bad-bg:#fdecE7;

  /* Aliases kept for JS-rendered markup */
  --soft:var(--inset);
  --soft2:#e6e4e1;
  --th-bg:transparent;
  --chosen-bg:var(--tint);
  --row-focus:var(--tint);
  --gap-bg:var(--tint);
  --green:var(--good);
  --amber:var(--warn);
  --red:var(--bad);

  /* Shape & motion */
  --radius:16px;
  --r-sm:10px;
  --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(45,43,43,.06);
  --shadow-md:0 8px 24px rgba(45,43,43,.08);
  --shadow-lg:0 24px 64px rgba(45,43,43,.12);
  --shadow-glow:0 16px 48px rgba(255,88,45,.25);
  --ease:cubic-bezier(.22,1,.36,1);
  --sidebar-w:272px;

  --font:"Noto Sans Thai","Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Outfit","Noto Sans Thai",system-ui,sans-serif;
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#232121;--panel:#2d2b2b;--inset:#3a3737;
    --border:rgba(247,247,247,.10);--border-strong:rgba(247,247,247,.22);
    --text:#f7f7f7;--text-2:rgba(247,247,247,.76);--muted:rgba(247,247,247,.56);--faint:rgba(247,247,247,.32);
    --primary-dark:#ff7a52;
    --tint:#3a2a22;--tint-2:#3a3120;--tint-text:#ffab24;
    --good:#7fd19b;--good-bg:#233a2b;--warn:#ffc766;--warn-bg:#3d3220;--bad:#ff8f73;--bad-bg:#40261f;
    --soft2:#443f3f;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#232121;--panel:#2d2b2b;--inset:#3a3737;
  --border:rgba(247,247,247,.10);--border-strong:rgba(247,247,247,.22);
  --text:#f7f7f7;--text-2:rgba(247,247,247,.76);--muted:rgba(247,247,247,.56);--faint:rgba(247,247,247,.32);
  --primary-dark:#ff7a52;
  --tint:#3a2a22;--tint-2:#3a3120;--tint-text:#ffab24;
  --good:#7fd19b;--good-bg:#233a2b;--warn:#ffc766;--warn-bg:#3d3220;--bad:#ff8f73;--bad-bg:#40261f;
  --soft2:#443f3f;
  color-scheme:dark;
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  font-weight:300;
  font-size:15px;
  line-height:1.7;
  letter-spacing:0;
  word-break:keep-all;
  overflow-wrap:anywhere;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;color:var(--text);line-height:1.4;letter-spacing:0;}
strong,b{font-weight:500;}
a{color:inherit;}
.ic{width:18px;height:18px;stroke-width:1.5;flex-shrink:0;}
svg.lucide,i[data-lucide]{width:18px;height:18px;stroke-width:1.5;}
:where(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--ft-gold);outline-offset:2px;}

/* ============================================================
   Shell — sidebar + main
   ============================================================ */
.sidebar{
  position:fixed;inset:0 auto 0 0;
  width:var(--sidebar-w);
  background:#2d2b2b;
  color:rgba(247,247,247,.78);
  display:flex;flex-direction:column;
  padding:calc(28px + env(safe-area-inset-top,0px)) 16px 20px;
  overflow-y:auto;
  z-index:20;
}
.sidebar-brand{padding:0 12px 24px;}
.sidebar-brand img{display:block;height:30px;width:auto;}
.sidebar-brand .brand-text{display:block;margin-top:14px;font-family:var(--font-display);font-size:15px;font-weight:500;color:#f7f7f7;}
.sidebar-brand small{display:block;font-size:12px;font-weight:300;color:rgba(247,247,247,.52);margin-top:2px;}

.nav-group-title{
  font-family:var(--font-display);
  font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(247,247,247,.42);
  margin:22px 12px 8px;
}
.nav-btn{
  display:flex;align-items:center;gap:12px;
  width:100%;text-align:left;
  background:transparent;border:0;
  color:rgba(247,247,247,.74);
  padding:10px 12px;margin-bottom:2px;
  border-radius:12px;
  font-family:var(--font);font-size:14px;font-weight:300;line-height:1.45;
  cursor:pointer;
  transition:background 180ms var(--ease),color 180ms var(--ease);
}
.nav-btn:hover{background:rgba(247,247,247,.06);color:#f7f7f7;}
.nav-btn .num{
  width:28px;height:28px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(247,247,247,.06);
  color:rgba(247,247,247,.72);
  font-family:var(--font-display);font-size:12px;font-weight:500;
  flex-shrink:0;
}
.nav-btn .num svg{width:16px;height:16px;}
.nav-btn.active{background:#3a3737;color:#fff;font-weight:400;}
.nav-btn.active .num{background:var(--ft-gradient);color:#fff;}
.nav-btn .part{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(247,247,247,.42);font-family:var(--font-display);}
.nav-btn.active .part{color:var(--ft-gold);}

.sidebar-foot{margin-top:auto;padding:24px 12px 0;font-size:11.5px;color:rgba(247,247,247,.40);line-height:1.6;}
.theme-toggle{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;
  background:rgba(247,247,247,.06);border:0;border-radius:var(--r-pill);
  color:rgba(247,247,247,.78);padding:7px 14px;font-family:var(--font);font-size:12.5px;font-weight:300;cursor:pointer;
}
.theme-toggle:hover{background:rgba(247,247,247,.10);color:#fff;}
.theme-toggle svg{width:15px;height:15px;}

.main{
  margin-left:var(--sidebar-w);
  padding:40px 48px 72px;
  max-width:calc(1180px + var(--sidebar-w));
}
.page{display:none;}
.page.active{display:block;animation:rise 520ms var(--ease);}
@keyframes rise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* Page header */
.page-header{margin:0 0 28px;max-width:760px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--primary);margin-bottom:10px;
}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--ft-gradient-h);}
.page-header h1{font-size:32px;line-height:1.35;margin:0 0 8px;}
.page-header p{margin:0;color:var(--text-2);font-size:15.5px;}

/* Part progress strip (Part 1 · 2 · 3) */
.parts-strip{display:flex;gap:8px;margin:0 0 24px;flex-wrap:wrap;}
.parts-strip button{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--border);background:var(--panel);color:var(--text-2);
  border-radius:var(--r-pill);padding:6px 14px 6px 6px;font-family:var(--font);font-size:13px;font-weight:300;cursor:pointer;
  transition:box-shadow 180ms var(--ease),transform 180ms var(--ease);
}
.parts-strip button:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.parts-strip button span{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--inset);font-family:var(--font-display);font-weight:500;font-size:12px;color:var(--text);}
.parts-strip button.on{background:var(--text);color:var(--bg);border-color:transparent;}
.parts-strip button.on span{background:var(--ft-gradient);color:#fff;}

/* ============================================================
   Cards
   ============================================================ */
.card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 32px;
  margin-bottom:20px;
}
.card h2{font-size:19px;margin:0 0 4px;display:flex;align-items:center;gap:10px;}
.card h3{font-size:15px;margin:20px 0 10px;color:var(--text);}
.card .card-sub{color:var(--muted);font-size:13.5px;margin:0 0 20px;max-width:760px;}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.card-icon{
  width:36px;height:36px;border-radius:12px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--tint);color:var(--primary);
}
.card-icon svg{width:18px;height:18px;}

details.card{padding:20px 32px;}
details.card summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-display);font-weight:500;font-size:15.5px;color:var(--text);
}
details.card summary::-webkit-details-marker{display:none;}
details.card summary::after{content:"+";font-size:20px;font-weight:300;color:var(--muted);transition:transform 320ms var(--ease);}
details.card[open] summary::after{transform:rotate(45deg);}

.grid{display:grid;gap:16px;}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

.divider{height:1px;background:var(--border);margin:24px 0;}
.hint{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.6;}
.footer-note{color:var(--faint);font-size:12px;margin-top:40px;text-align:center;}

/* ============================================================
   Form
   ============================================================ */
.field{margin-bottom:16px;}
label{display:block;font-size:13px;font-weight:400;color:var(--text-2);margin-bottom:6px;}
input:where(:not([type=checkbox]):not([type=radio]):not([type=range])),textarea,select{
  width:100%;
  border:1px solid var(--border-strong);
  border-radius:12px;
  padding:11px 14px;
  font-family:inherit;font-size:14px;font-weight:300;line-height:1.6;
  background:var(--panel);
  color:var(--text);
  transition:border-color 180ms var(--ease),box-shadow 180ms var(--ease);
  resize:vertical;
}
input::placeholder,textarea::placeholder{color:var(--faint);}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ft-gold);box-shadow:0 0 0 3px rgba(255,171,36,.22);}
textarea{min-height:84px;}
textarea[readonly]{background:var(--inset);}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px;}
input[type=range]{accent-color:var(--primary);}
input[type=checkbox]{accent-color:var(--primary);width:16px;height:16px;}

/* Four questions */
.q-list{display:grid;gap:12px;margin-top:8px;}
.q-block{border:1px solid var(--border);border-radius:14px;padding:20px 22px;background:var(--bg);}
.card .q-title{display:flex;align-items:center;gap:12px;font-size:15px;margin:0 0 14px;color:var(--text);}
.q-num{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--text);color:var(--bg);
  font-family:var(--font-display);font-size:13px;font-weight:500;
}
.q-block .field:last-child,.q-block .grid .field{margin-bottom:0;}

.chk-row{display:flex;flex-wrap:wrap;gap:8px;}
.chk-row label{
  display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer;
  border:1px solid var(--border-strong);border-radius:var(--r-pill);padding:7px 14px;
  font-size:13px;color:var(--text);font-weight:300;
  transition:background 180ms var(--ease),border-color 180ms var(--ease);
}
.chk-row label:has(input:checked){background:var(--tint);border-color:transparent;color:var(--tint-text);}
.chk-row input{margin:0;}

.slider-row{display:flex;align-items:center;gap:14px;}
.slider-row input[type=range]{flex:1;}
.slider-val{
  min-width:36px;height:30px;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;
  background:var(--tint);color:var(--tint-text);font-family:var(--font-display);font-weight:500;font-size:14px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--primary);color:#fff;border:0;
  padding:11px 22px;border-radius:var(--r-pill);
  font-family:var(--font);font-size:14px;font-weight:400;line-height:1.3;
  cursor:pointer;white-space:nowrap;
  transition:background 180ms var(--ease),transform 120ms var(--ease),box-shadow 180ms var(--ease);
}
.btn svg{width:16px;height:16px;}
.btn:hover{background:var(--ft-mid-orange);transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn:active{transform:scale(.98);box-shadow:var(--shadow-sm);transition-duration:60ms;}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn:disabled:hover{background:var(--primary);}
.btn.cta{background:var(--ft-gradient);box-shadow:var(--shadow-glow);padding:14px 28px;font-size:15px;}
.btn.cta:hover{filter:brightness(1.04);}
.btn.secondary{background:var(--text);color:var(--bg);}
.btn.secondary:hover{background:var(--text);opacity:.88;}
.btn.secondary:disabled:hover{opacity:.5;}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border-strong);}
.btn.ghost:hover{background:var(--inset);box-shadow:none;}
.btn.danger{background:var(--bad-bg);color:var(--bad);}
.btn.danger:hover{background:var(--bad-bg);}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px;}
.btn-row input{min-width:0;}

.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}

.status-banner{display:none;align-items:flex-start;gap:10px;padding:14px 18px;border-radius:12px;font-size:13.5px;margin-top:16px;line-height:1.6;}
.status-banner.show{display:flex;}
.status-banner.loading{background:var(--inset);color:var(--text);}
.status-banner.loading .spin{border-color:var(--border-strong);border-top-color:var(--primary);margin-top:3px;}
.status-banner.success{background:var(--good-bg);color:var(--good);}
.status-banner.error{background:var(--bad-bg);color:var(--bad);}

.save-indicator{
  position:fixed;top:20px;right:24px;z-index:50;
  background:var(--text);color:var(--bg);font-size:12.5px;padding:7px 16px;border-radius:var(--r-pill);
  opacity:0;transform:translateY(-4px);transition:opacity 320ms var(--ease),transform 320ms var(--ease);
  pointer-events:none;
}
.save-indicator.show{opacity:1;transform:none;}

/* ============================================================
   Badges, chips, tags
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:var(--r-pill);font-size:11.5px;font-weight:400;line-height:1.7;white-space:nowrap;vertical-align:middle;}
.badge.sale{background:var(--tint);color:var(--tint-text);}
.badge.knowledge{background:var(--inset);color:var(--text);}
.badge.trend{background:var(--tint-2);color:var(--warn);}
.badge.green{background:var(--good-bg);color:var(--good);}
.badge.amber{background:var(--warn-bg);color:var(--warn);}
.badge.red{background:var(--ft-gradient);color:#fff;}

.chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-size:12.5px;padding:4px 12px;border-radius:var(--r-pill);}
.chip.ok{background:var(--good-bg);color:var(--good);}
.chip.miss{background:var(--inset);color:var(--muted);}

.tag-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;}
.tag-list span{background:var(--inset);color:var(--text-2);padding:3px 11px;border-radius:var(--r-pill);font-size:12px;}

/* ============================================================
   Tables
   ============================================================ */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:14px;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th,td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border);}
tr:last-child td{border-bottom:0;}
th{
  background:var(--inset);
  font-family:var(--font-display);font-size:11.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
tbody tr{transition:background 180ms var(--ease);}
tbody tr:hover td{background:var(--bg);}
tr.row-focus td{background:var(--tint);}
tr.row-focus:hover td{background:var(--tint);}
tr.row-focus td:first-child{box-shadow:inset 3px 0 0 var(--primary);}

.compare-table td.rowhead{background:var(--bg);font-weight:400;font-size:12.5px;color:var(--text);white-space:nowrap;}
.compare-table td.empty{color:var(--faint);font-size:12px;}
.compare-table td{font-size:13px;line-height:1.65;}

/* ============================================================
   Highlights — the "focus here" system
   ============================================================ */
.highlight{
  background:var(--tint);
  border-radius:14px;
  padding:18px 22px;margin-bottom:20px;
  color:var(--text);
}
.highlight h3{margin:0 0 6px;color:var(--tint-text);font-size:14.5px;}
.highlight p{color:var(--text);}

/* Focus box — dark inverse panel, used for "จุดที่ต้องโฟกัส" */
.focus-box{
  position:relative;overflow:hidden;
  background:#2d2b2b;color:#f7f7f7;
  border-radius:20px;
  padding:28px 32px;margin-bottom:20px;
}
:root[data-theme="dark"] .focus-box{background:#3a3737;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .focus-box{background:#3a3737;}}
.focus-box::after{
  content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border-radius:50%;
  background:var(--ft-gradient);opacity:.18;filter:blur(8px);pointer-events:none;
}
.focus-box h3{
  position:relative;margin:0 0 16px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ft-gold);
  display:flex;align-items:center;gap:8px;
}
.focus-box ol{position:relative;margin:0;padding:0;list-style:none;counter-reset:f;display:grid;gap:12px;}
.focus-box li{
  counter-increment:f;display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;
  font-size:15px;line-height:1.65;color:#f7f7f7;
}
.focus-box li::before{
  content:counter(f);width:28px;height:28px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(247,247,247,.10);color:#fff;font-family:var(--font-display);font-size:13px;font-weight:500;
}
.focus-box li:first-child::before{background:var(--ft-gradient);}
.focus-box .why{color:rgba(247,247,247,.62);font-size:13px;}
.focus-box strong{font-weight:500;color:#fff;}

/* ============================================================
   Overview hero + tiles
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  border-radius:24px;
  background:var(--panel);border:1px solid var(--border);
  padding:40px 40px 36px;margin-bottom:20px;
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;
}
.hero::before{
  content:"";position:absolute;right:-110px;top:-150px;width:380px;height:380px;border-radius:50%;
  background:var(--ft-gradient);background-size:200% 200%;animation:breathe 8s ease-in-out infinite alternate;
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--panel) 55%,transparent 100%);}
.hero>*{position:relative;z-index:1;}
.hero h1{font-size:34px;margin:0 0 8px;line-height:1.35;}
.hero p{margin:0;color:var(--text-2);max-width:560px;}
.hero .btn.cta{background:var(--text);color:var(--bg);box-shadow:var(--shadow-md);}
@keyframes breathe{from{background-position:0% 50%;}to{background-position:100% 50%;}}

.tile-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px;}
.tile{
  position:relative;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:22px 24px;
  transition:box-shadow 180ms var(--ease),transform 180ms var(--ease);
}
.tile:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.tile::before{content:"";position:absolute;top:24px;right:24px;width:10px;height:10px;border-radius:50%;background:var(--border-strong);}
.tile.green::before{background:#3aa066;}
.tile.yellow::before,.tile.amber::before{background:var(--ft-gold);}
.tile.red::before{background:var(--ft-deep-orange);box-shadow:0 0 0 4px rgba(255,88,45,.18);}
.tile-label{font-family:var(--font-display);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-right:20px;}
.tile-value{font-family:var(--font-display);font-size:24px;font-weight:500;margin:10px 0 4px;line-height:1.3;color:var(--text);}
.tile-sub{font-size:12.5px;color:var(--muted);line-height:1.55;}

.kv-list div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.kv-list div:last-child{border-bottom:0;}
.kv-list span{color:var(--muted);flex-shrink:0;}
.kv-list strong{text-align:right;}

.prog{height:8px;background:var(--inset);border-radius:var(--r-pill);overflow:hidden;margin-bottom:16px;}
.prog-bar{height:100%;background:var(--ft-gradient-h);border-radius:var(--r-pill);transition:width 520ms var(--ease);}

/* ============================================================
   Part 1 — Positioning
   ============================================================ */
.pos-matrix{
  position:relative;width:100%;max-width:440px;aspect-ratio:1/1;margin:0 auto 10px;
  background:
    linear-gradient(var(--border-strong),var(--border-strong)) 50% 0/1px 100% no-repeat,
    linear-gradient(var(--border-strong),var(--border-strong)) 0 50%/100% 1px no-repeat,
    var(--bg);
  border:1px solid var(--border);border-radius:20px;
}
.pos-matrix .quad-label{position:absolute;font-size:11px;color:var(--muted);padding:12px;line-height:1.35;font-family:var(--font-display);}
.pos-matrix .dot{
  position:absolute;width:22px;height:22px;border-radius:50%;
  background:var(--ft-gradient);box-shadow:0 0 0 6px rgba(255,88,45,.16),var(--shadow-glow);
  transform:translate(-50%,50%);transition:left 520ms var(--ease),bottom 520ms var(--ease);
}

.opt-card{
  border:1px solid var(--border);border-radius:14px;
  padding:18px 20px;margin-bottom:10px;cursor:pointer;background:var(--panel);
  transition:box-shadow 180ms var(--ease),transform 180ms var(--ease),background 180ms var(--ease);
}
.opt-card:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.opt-card.chosen{background:var(--tint);border-color:transparent;box-shadow:inset 3px 0 0 var(--primary);}
.opt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
.opt-head h3{margin:0;font-size:15px;color:var(--text);}
.opt-meta{display:flex;gap:6px;flex-shrink:0;flex-wrap:wrap;}
.opt-desc{font-size:13.5px;margin:10px 0;line-height:1.7;color:var(--text-2);}
.opt-sub{font-size:12.5px;color:var(--muted);line-height:1.6;margin-top:6px;padding-left:12px;border-left:2px solid var(--border-strong);}
.opt-sub.warn{border-left-color:var(--ft-gold);}
.opt-pick{font-size:12px;color:var(--muted);margin-top:10px;text-align:right;}
.opt-card.chosen .opt-pick{color:var(--tint-text);}

.feas-box{border-radius:14px;padding:18px 22px;margin-top:4px;}
.feas-box strong{display:flex;align-items:center;gap:8px;font-size:15px;}
.feas-box strong::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;}
.feas-box p{margin:8px 0 0;font-size:13.5px;color:var(--text);line-height:1.7;}
.feas-box.green{background:var(--good-bg);color:var(--good);}
.feas-box.yellow{background:var(--warn-bg);color:var(--warn);}
.feas-box.red{background:var(--bad-bg);color:var(--bad);}

/* ============================================================
   Part 2 — Competitors
   ============================================================ */
.type-card{border-radius:14px;padding:18px 20px;background:var(--bg);border:1px solid var(--border);}
.type-card h3{margin:10px 0 6px;font-size:14.5px;}
.type-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.65;}

.competitor-card{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;background:var(--panel);overflow:hidden;transition:box-shadow 180ms var(--ease);}
.competitor-card:hover{box-shadow:var(--shadow-md);}
.competitor-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 24px;cursor:pointer;}
.competitor-head h3{margin:0;font-size:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.competitor-body{padding:0 24px 24px;display:none;}
.competitor-body.open{display:block;}
.competitor-body h4,.competitor-body h3{font-size:13px;letter-spacing:.04em;color:var(--primary);margin:22px 0 10px;}
.competitor-head .chev{transition:transform 320ms var(--ease);color:var(--muted);}
.competitor-head.open .chev{transform:rotate(90deg);}
.er-result{margin-top:10px;font-size:13.5px;padding:10px 14px;border-radius:12px;background:var(--inset);}

.gap-item{background:var(--tint);border-radius:14px;padding:16px 20px;margin-bottom:10px;}
.gap-item p{margin:6px 0 0;font-size:13.5px;line-height:1.7;}

/* ============================================================
   Part 3 — Customers & platforms
   ============================================================ */
.reason{font-size:12.5px;line-height:1.6;margin-bottom:3px;}
.reason.good{color:var(--good);}
.reason.bad{color:var(--muted);}
.plat-rank{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border);font-size:13.5px;}
.plat-rank:last-child{border-bottom:0;}
.plat-rank .rank{width:28px;height:28px;border-radius:50%;background:var(--inset);color:var(--text);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:13px;font-weight:500;flex-shrink:0;}
.plat-rank:first-child .rank{background:var(--ft-gradient);color:#fff;}
.plat-rank div{flex:1;min-width:0;}

/* ============================================================
   Roadmap — the final page
   ============================================================ */
.act-block{margin-bottom:28px;}
.act-block h3{
  display:flex;align-items:center;gap:10px;
  font-size:15px;color:var(--text);margin:0 0 12px;
}
.act-block h3::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--border-strong);}
.act-block:first-child h3::before{background:var(--ft-gradient);box-shadow:0 0 0 4px rgba(255,88,45,.16);}
.act-item{
  display:flex;gap:16px;align-items:center;
  padding:14px 18px;border-radius:14px;border:1px solid var(--border);
  margin-bottom:8px;background:var(--panel);
  transition:box-shadow 180ms var(--ease);
}
.act-item:hover{box-shadow:var(--shadow-md);}
.act-item.high{background:var(--tint);border-color:transparent;}
.act-main{flex:1;min-width:0;}
.act-txt{font-size:14px;line-height:1.65;}
.act-why{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.6;}
.act-item .btn{flex-shrink:0;font-size:12.5px;padding:8px 16px;}

.roadmap-col{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;}
.roadmap-col:first-child{background:#2d2b2b;border-color:transparent;color:#f7f7f7;}
.roadmap-col:first-child h3{color:var(--ft-gold);}
.roadmap-col:first-child .roadmap-item .txt{color:#f7f7f7;}
.roadmap-col:first-child input[type=text]{background:#3a3737;border-color:rgba(247,247,247,.14);color:#f7f7f7;}
.roadmap-col:first-child .btn.secondary{background:#f7f7f7;color:#2d2b2b;}
.roadmap-col h3{margin:0 0 14px;font-size:14.5px;}
.roadmap-col>div:first-of-type{flex:1;}
.roadmap-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;font-size:13.5px;line-height:1.6;}
.roadmap-item input[type=checkbox]{margin-top:4px;flex-shrink:0;}
.roadmap-item .txt{flex:1;}
.roadmap-item .rm{background:none;border:0;color:var(--faint);cursor:pointer;font-size:14px;padding:0 2px;}
.roadmap-item .rm:hover{color:var(--primary);}
.roadmap-col .btn-row{flex-wrap:nowrap;}
.roadmap-col .btn-row input{padding:8px 12px;font-size:13px;}
.roadmap-col .btn-row .btn{padding:8px 14px;font-size:12.5px;}

.section-title{font-size:20px;margin:36px 0 16px;}

/* ============================================================
   Content system
   ============================================================ */
.hook-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;}
.hook-tile{border:1px solid var(--border);border-radius:12px;padding:12px 14px;font-size:12.5px;background:var(--bg);}
.hook-tile .hnum{font-family:var(--font-display);font-weight:500;color:var(--text);font-size:12px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.hook-tile .hname{color:var(--muted);font-size:11.5px;margin:4px 0 6px;}
.hook-tile .htext{line-height:1.6;}

.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;}
.cal-day{border:1px solid var(--border);border-radius:12px;padding:10px;font-size:11.5px;min-height:88px;cursor:pointer;background:var(--panel);transition:box-shadow 180ms var(--ease),transform 180ms var(--ease);}
.cal-day:hover{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.cal-day .dnum{font-family:var(--font-display);font-weight:500;font-size:14px;}
.cal-day .dpill{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;}
.cal-day .dtitle{margin-top:6px;line-height:1.45;color:var(--muted);}
.day-detail{border-radius:16px;padding:20px 24px;margin-top:16px;background:var(--tint);}
.day-detail:empty{display:none;}

.copy-box{position:relative;}
.copy-box textarea{padding-right:84px;}
.copy-btn{position:absolute;top:10px;right:10px;font-size:12px;padding:6px 12px;}

.checklist label{display:flex;gap:10px;align-items:flex-start;font-weight:300;color:var(--text);font-size:13.5px;margin-bottom:8px;}
.checklist input{margin-top:4px;flex-shrink:0;}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1180px){
  .tile-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hook-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:900px){
  .grid-2,.grid-3{grid-template-columns:1fr;}
  .main{padding:32px 28px 64px;}
  .hero{grid-template-columns:1fr;}
}
@media (max-width:760px){
  .sidebar{
    position:sticky;top:0;inset:auto;width:100%;height:auto;
    flex-direction:row;align-items:center;gap:6px;
    overflow-x:auto;padding:10px 16px;
    scrollbar-width:none;
  }
  .sidebar::-webkit-scrollbar{display:none;}
  .sidebar-brand{padding:0 10px 0 0;flex-shrink:0;}
  .sidebar-brand img{height:22px;}
  .sidebar-brand .brand-text,.nav-group-title,.sidebar-foot,.nav-btn .part{display:none;}
  .nav-btn{width:auto;white-space:nowrap;margin:0;padding:6px 12px 6px 6px;flex-shrink:0;}
  .main{margin-left:0;padding:24px 16px 56px;}
  .page-header h1{font-size:26px;}
  .card{padding:22px 18px;}
  details.card{padding:18px;}
  .hero{padding:28px 22px;}
  .hero h1{font-size:26px;}
  .focus-box{padding:22px 20px;}
  .tile-row,.grid-4{grid-template-columns:1fr;}
  .hook-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cal-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .act-item{flex-direction:column;align-items:stretch;}
  .kv-list div{flex-direction:column;gap:2px;}
  .kv-list strong{text-align:left;}
}

/* ============================================================
   Print
   ============================================================ */
@media print{
  .sidebar,.btn,.btn-row,.save-indicator,.parts-strip{display:none !important;}
  .main{margin-left:0;padding:0;}
  .page{display:none !important;}
  .page.active{display:block !important;}
  .card,.act-item,.tile{break-inside:avoid;box-shadow:none;}
  .hero::before{display:none;}
}

/* ============================================================
   Projects layer — auth, project home, project bar, modals
   ============================================================ */
body.signed-out .sidebar,
body.signed-out .main{display:none;}

.auth-screen{
  position:fixed;inset:0;z-index:60;overflow-y:auto;
  display:flex;align-items:center;justify-content:center;
  padding:32px 16px;background:var(--bg);
}
.auth-screen[hidden]{display:none;}
.auth-screen::before{
  content:"";position:fixed;right:-160px;top:-160px;width:460px;height:460px;border-radius:50%;
  background:var(--ft-gradient);opacity:.9;pointer-events:none;
}
.auth-card{
  position:relative;width:100%;max-width:420px;
  background:var(--panel);border:1px solid var(--border);border-radius:24px;
  padding:36px 32px;box-shadow:var(--shadow-lg);
}
.auth-logo{display:block;height:28px;width:auto;margin-bottom:24px;}
:root[data-theme="dark"] .auth-logo{content:url("../assets/logo-horizontal-white.png");}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .auth-logo{content:url("../assets/logo-horizontal-white.png");}}
.auth-card h1{font-size:26px;margin:0 0 6px;}
.auth-sub{color:var(--text-2);margin:0 0 24px;font-size:14px;}
.auth-submit{width:100%;margin-top:8px;}
.auth-switch{margin:20px 0 0;font-size:14px;color:var(--text-2);text-align:center;}
.auth-switch button{background:none;border:0;color:var(--primary);font:inherit;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;}
.auth-foot{margin:12px 0 0;font-size:12px;color:var(--muted);text-align:center;}
#authErr{margin:0 0 12px;}

/* sidebar account button */
.account-btn{display:flex;width:100%;margin-bottom:8px;}
.account-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ---------- project bar (sticky, inside main) ---------- */
.project-bar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:15;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  margin:-40px -48px 28px;padding:14px 48px;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.project-bar[hidden]{display:none;}
.pj-back{
  display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  color:var(--text-2);font:inherit;font-size:13.5px;padding:6px 10px 6px 4px;border-radius:var(--r-pill);
}
.pj-back:hover{background:var(--inset);color:var(--text);}
.pj-back svg{width:16px;height:16px;}
.pj-bar-name{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0;flex:1;}
.pj-bar-label{font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.pj-bar-name strong{font-family:var(--font-display);font-size:17px;}
.pj-bar-actions{display:flex;gap:8px;flex-wrap:wrap;}
.pj-bar-actions .btn{padding:8px 14px;font-size:13px;}
.badge svg{width:12px;height:12px;}

.pj-save{font-size:12.5px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.pj-save::before{content:"";width:8px;height:8px;border-radius:50%;background:#3aa066;}
.pj-save.pending::before,.pj-save.saving::before{background:var(--ft-gold);}
.pj-save.saving::before{animation:pulse 1s ease-in-out infinite;}
.pj-save.error,.pj-save.conflict{color:var(--bad);white-space:normal;}
.pj-save.error::before,.pj-save.conflict::before{background:var(--ft-deep-orange);}
@keyframes pulse{50%{opacity:.3;}}

.pj-conflict{
  flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  background:var(--bad-bg);color:var(--bad);border-radius:12px;padding:12px 16px;font-size:13.5px;
}
.pj-conflict[hidden]{display:none;}
.pj-conflict span{flex:1;min-width:200px;}
.pj-conflict .btn{padding:8px 14px;font-size:13px;}

/* ---------- projects home ---------- */
.pj-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:none;}
.pj-header>div{max-width:640px;}
.pj-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;align-items:start;}
.pj-filters{display:flex;flex-direction:column;gap:2px;position:sticky;top:24px;}
.pj-filter{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;border-radius:12px;padding:9px 12px;cursor:pointer;
  font:inherit;font-size:14px;color:var(--text-2);
  transition:background 180ms var(--ease);
}
.pj-filter:hover{background:var(--inset);color:var(--text);}
.pj-filter.on{background:var(--text);color:var(--bg);}
.pj-filter svg{width:16px;height:16px;flex-shrink:0;}
.pj-filter span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pj-filter em{font-style:normal;font-size:12px;opacity:.7;font-variant-numeric:tabular-nums;}
.pj-filter-title{
  display:flex;align-items:center;justify-content:space-between;
  margin:18px 0 4px 12px;font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.pj-folder-row{display:flex;align-items:center;gap:2px;}
.pj-folder-row .pj-filter{flex:1;min-width:0;}
.pj-empty-folders{margin:0 12px;}
.pj-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;
  border:0;border-radius:50%;background:none;color:var(--muted);cursor:pointer;
}
.pj-icon-btn:hover{background:var(--inset);color:var(--text);}
.pj-icon-btn svg{width:16px;height:16px;}

.pj-search{position:relative;margin-bottom:16px;}
.pj-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted);pointer-events:none;}
.pj-search input{padding-left:40px;border-radius:var(--r-pill);}

.pj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;}
.pj-card{
  display:flex;flex-direction:column;gap:6px;
  background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;cursor:pointer;min-height:168px;
  transition:box-shadow 180ms var(--ease),transform 180ms var(--ease);
}
.pj-card:hover,.pj-card:focus-visible{box-shadow:var(--shadow-md);transform:translateY(-1px);}
.pj-card-top{display:flex;align-items:center;justify-content:space-between;margin:-4px -8px 4px 0;}
.pj-card h3{margin:0;font-size:17px;line-height:1.4;}
.pj-card-sub{margin:0;color:var(--text-2);font-size:13px;flex:1;}
.pj-card-foot{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--muted);border-top:1px solid var(--border);padding-top:10px;margin-top:6px;}
.pj-empty{grid-column:1/-1;text-align:center;padding:56px 24px;border:1px dashed var(--border-strong);border-radius:var(--radius);}
.pj-empty h3{margin:0 0 6px;}
.pj-empty p{margin:0 auto 16px;color:var(--text-2);max-width:420px;}

/* ---------- modal ---------- */
.pj-modal{
  position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;
  padding:24px 16px;background:rgba(35,33,33,.45);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.pj-modal[hidden]{display:none;}
.pj-modal-card{
  width:100%;max-width:440px;max-height:calc(100vh - 48px);overflow-y:auto;
  background:var(--panel);border-radius:20px;padding:28px;box-shadow:var(--shadow-lg);
  animation:rise 320ms var(--ease);
}
.pj-modal-card.wide{max-width:620px;}
.pj-modal-card h2{font-size:20px;margin:0 0 8px;}
.pj-modal-body{color:var(--text-2);font-size:14px;margin-bottom:16px;}
.pj-modal-body .hint{color:var(--muted);}
.pj-menu{display:flex;flex-direction:column;gap:2px;margin:0 -8px;}
.pj-menu-item{
  display:flex;align-items:center;gap:12px;background:none;border:0;border-radius:12px;
  padding:11px 12px;font:inherit;font-size:14.5px;color:var(--text);text-align:left;cursor:pointer;
}
.pj-menu-item:hover{background:var(--inset);}
.pj-menu-item svg{width:18px;height:18px;color:var(--muted);}
.pj-menu-item.danger,.pj-menu-item.danger svg{color:var(--bad);}

.pj-versions{display:flex;flex-direction:column;}
.pj-version,.pj-member{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);color:var(--text);}
.pj-version>div,.pj-member>div{flex:1;min-width:0;}
.pj-version .btn,.pj-member .btn{padding:7px 14px;font-size:12.5px;}
.pj-member{flex-wrap:wrap;}
.pj-account{color:var(--text);}
.pj-invite{margin-top:20px;padding:16px 18px;border-radius:14px;background:var(--tint);}
.pj-invite-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;}
.pj-invite code,.pj-temp-pw{
  font-family:ui-monospace,Menlo,monospace;font-size:16px;letter-spacing:.06em;
  background:var(--panel);color:var(--text);padding:8px 14px;border-radius:10px;user-select:all;
}
.pj-temp-pw{display:inline-block;margin:4px 0 8px;}
.pj-modal-error{color:var(--bad);font-size:13px;margin-bottom:8px;}

/* ---------- toast ---------- */
.pj-toast{
  position:fixed;left:50%;bottom:24px;z-index:80;transform:translate(-50%,12px);
  background:var(--text);color:var(--bg);padding:10px 20px;border-radius:var(--r-pill);font-size:13.5px;
  opacity:0;pointer-events:none;transition:opacity 320ms var(--ease),transform 320ms var(--ease);
  max-width:calc(100vw - 32px);text-align:center;
}
.pj-toast.show{opacity:1;transform:translate(-50%,0);}
.pj-toast.error{background:var(--ft-deep-orange);color:#fff;}

@media (max-width:900px){
  .pj-layout{grid-template-columns:1fr;}
  .pj-filters{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;}
  .pj-filter{width:auto;}
  .pj-filter-title{flex-basis:100%;margin-left:0;}
  .project-bar{margin:-32px -28px 24px;padding:12px 28px;}
}
@media (max-width:760px){
  .project-bar{margin:-24px -16px 20px;padding:10px 16px;top:52px;}
  .pj-bar-actions{width:100%;}
  .auth-card{padding:28px 20px;}
}
@media (prefers-reduced-motion:reduce){
  .pj-modal-card,.page.active{animation:none;}
  .pj-save.saving::before{animation:none;}
}

/* per-section AI re-run */
.ai-rerun{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  margin:-8px 0 24px;padding:14px 18px;border-radius:14px;
  background:var(--panel);border:1px dashed var(--border-strong);
}
.ai-rerun-text{flex:1;min-width:240px;display:flex;flex-direction:column;gap:2px;font-size:14px;}
.ai-rerun .btn{padding:9px 16px;font-size:13px;}
.ai-rerun .status-banner{flex-basis:100%;margin-top:0;}

/* auth extras + share link */
.auth-google{width:100%;gap:10px;}
.auth-or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:12.5px;}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--border);}
.auth-link{background:none;border:0;padding:0;font:inherit;color:var(--primary);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
a.auth-submit{text-decoration:none;}
.pj-link-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0 6px;}
.pj-link-row input{flex:1;min-width:220px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;}
.pj-link-row .btn{padding:9px 14px;font-size:13px;text-decoration:none;}
.pj-backup{display:flex;flex-direction:column;gap:6px;background:var(--inset);}
.pj-backup .btn{text-decoration:none;}
.pj-bar-name{min-width:220px;}
.pj-bar-name strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

/* customer type (B2B / B2C) */
.biz-model{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);}
.biz-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.biz-seg button{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  border:1px solid var(--border-strong);border-radius:12px;background:var(--panel);color:var(--text);
  padding:12px 14px;cursor:pointer;font:inherit;
  transition:border-color 180ms var(--ease),background 180ms var(--ease);
}
.biz-seg button strong{font-family:var(--font-display);font-size:15px;}
.biz-seg button span{font-size:12.5px;color:var(--muted);}
.biz-seg button:hover{border-color:var(--text-2);}
.biz-seg button.on{background:var(--text);border-color:var(--text);color:var(--bg);}
.biz-seg button.on span{color:inherit;opacity:.75;}
.biz-mix{margin-top:14px;}
.biz-mix[hidden]{display:none;}
.biz-mix-labels{display:flex;justify-content:space-between;font-family:var(--font-display);font-weight:500;font-size:14px;margin-bottom:6px;}
.biz-mix-labels span:first-child{color:var(--primary);}
.biz-mix-bar{
  --b2b:50%;position:relative;height:28px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--ft-deep-orange) 0 var(--b2b),var(--inset) var(--b2b) 100%);
}
.biz-mix-bar input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:ew-resize;}
.biz-mix-bar input[type=range]::-webkit-slider-runnable-track{background:transparent;height:28px;}
.biz-mix-bar input[type=range]::-moz-range-track{background:transparent;height:28px;}
.biz-mix-bar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:3px;border-radius:50%;background:#fff;border:2px solid var(--ft-deep-orange);box-shadow:var(--shadow-md);}
.biz-mix-bar input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--ft-deep-orange);box-shadow:var(--shadow-md);}
#bizMixCustomers[hidden]{display:none;}
@media (max-width:600px){.biz-seg{grid-template-columns:1fr;}}

/* industry template */
.tpl-box{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:12px;padding:14px 16px;border-radius:12px;background:var(--tint);}
.tpl-box[hidden]{display:none;}
.tpl-box>div{flex:1;min-width:240px;font-size:14px;}
.tpl-box .btn{padding:9px 16px;font-size:13px;}
.tpl-result{margin-top:8px;font-size:13px;color:var(--tint-text);}
.industry-hint{margin-top:16px;}
.industry-hint ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.7;}
.industry-hint[hidden]{display:none;}

/* password show/hide */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:46px;}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;border-radius:50%;background:none;color:var(--muted);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.pw-toggle:hover{background:var(--inset);color:var(--text);}
.pw-toggle svg{width:18px;height:18px;}

/* presentation page */
.pr-variants{grid-template-columns:repeat(2,minmax(0,1fr));}
.pr-admin{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 18px;border-radius:14px;background:var(--inset);margin-bottom:16px;}
.pr-admin[hidden]{display:none;}
.pr-admin>div{flex:1;min-width:260px;font-size:14px;}
.pr-upload{cursor:pointer;}
.pr-case-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}
.pr-case-tools .btn{padding:9px 16px;font-size:13px;}
.pr-cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;max-height:520px;overflow:auto;padding:2px;}
.pr-case{display:flex;flex-direction:column;gap:6px;border:1px solid var(--border);border-radius:12px;padding:8px;cursor:pointer;background:var(--panel);font-size:13px;margin:0;color:var(--text);position:relative;}
.pr-case.on{border-color:var(--primary);box-shadow:0 0 0 2px rgba(255,88,45,.25);}
.pr-case input{position:absolute;top:12px;left:12px;}
.pr-case img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--inset);}
.pr-files{display:flex;flex-direction:column;}
.pr-file{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.pr-file label{flex:1;display:flex;align-items:center;gap:8px;margin:0;color:var(--text);font-size:14px;cursor:pointer;}
.pr-order{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.pr-block{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 14px;border-radius:12px;border:1px solid var(--border);background:var(--panel);}
.pr-block.analysis{background:var(--tint);border-color:transparent;}
.pr-block.file{border-style:dashed;}
.pr-idx{width:28px;height:28px;border-radius:50%;background:var(--inset);display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:13px;font-weight:500;flex-shrink:0;}
.pr-name{flex:1;min-width:0;font-size:14.5px;}
.pr-block .pj-icon-btn:disabled{opacity:.3;cursor:default;}
#prAddBlock{margin-top:12px;}
#prAddBlock .btn{padding:7px 14px;font-size:12.5px;}
#prChromeWarn[hidden]{display:none;}
@media (max-width:700px){.pr-variants{grid-template-columns:1fr;}}

/* media plan page */
.mp-brief{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px 20px;}
.mp-brief-row{display:grid;grid-template-columns:12px 210px 1fr;gap:10px;align-items:baseline;font-size:14px;padding:6px 0;border-bottom:1px solid var(--border);}
.mp-brief-row .mp-dot{width:9px;height:9px;border-radius:50%;background:#3aa066;align-self:center;}
.mp-brief-row.miss .mp-dot{background:var(--ft-deep-orange);}
.mp-brief-row.miss .mp-val{color:var(--bad);}
.mp-val{color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mp-services{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.mp-svc-title{font-family:var(--font-display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;}
.mp-svc{display:flex;gap:10px;align-items:flex-start;margin:0 0 8px;font-size:13.5px;color:var(--text);cursor:pointer;}
.mp-svc input{margin-top:4px;flex-shrink:0;}
.mp-svc em{font-style:normal;color:var(--tint-text);font-size:12.5px;margin-left:4px;}
.mp-svc small{display:block;color:var(--muted);font-size:12px;line-height:1.5;}
.mp-ask ul{margin:6px 0 10px;padding-left:20px;}
.mp-ask[hidden]{display:none;}
.mp-sheet-wrap{max-height:70vh;}
.mp-sheet{font-size:12.5px;border-collapse:collapse;min-width:100%;}
.mp-sheet td,.mp-sheet th{padding:6px 10px;border-bottom:1px solid var(--border);white-space:nowrap;}
.mp-sheet td:nth-child(1){position:sticky;left:0;background:var(--panel);font-weight:400;min-width:230px;}
.mp-sheet td:nth-child(2){max-width:260px;white-space:normal;color:var(--text-2);}
.mp-sheet td.n{text-align:right;font-variant-numeric:tabular-nums;}
.mp-sheet td.t{font-weight:500;}
.mp-sheet tr.sec th{background:#edebe8;color:#2d2b2b;text-align:right;font-family:var(--font-display);font-weight:500;font-size:12px;letter-spacing:0;text-transform:none;}
.mp-sheet tr.sec th:first-child{text-align:left;position:sticky;left:0;}
.mp-sheet tr.sec th small{display:block;font-weight:300;color:#6b6767;font-size:10.5px;}
.mp-sheet tr.grp td{background:#fce9de;color:#2d2b2b;font-weight:500;}
.mp-sheet tr.tot td{background:var(--inset);font-weight:500;}
.mp-sheet tr.grand td{background:#ffe3d6;color:#c2410c;font-weight:500;}
.mp-sheet tr.gap td{border:0;height:14px;background:transparent;}
:root[data-theme="dark"] .mp-sheet tr.grp td,:root[data-theme="dark"] .mp-sheet tr.grand td,:root[data-theme="dark"] .mp-sheet tr.sec th{color:#2d2b2b;}
.mp-list{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14px;line-height:1.65;}
.mp-list.small{font-size:13px;}
.pr-drive-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.pr-drive-row input{flex:1;min-width:240px;font-size:13px;}
.pr-drive-row .btn{padding:9px 16px;font-size:13px;}
#prPicker[hidden]{display:none;}
.pr-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;max-height:640px;overflow:auto;padding:2px;}
.pr-pick{position:relative;display:flex;flex-direction:column;gap:6px;border:1px solid var(--border);border-radius:12px;padding:8px;cursor:pointer;background:var(--panel);font-size:12.5px;margin:0;color:var(--text);opacity:.55;}
.pr-pick.on{opacity:1;border-color:var(--primary);box-shadow:0 0 0 2px rgba(255,88,45,.2);}
.pr-pick input{position:absolute;top:12px;left:12px;}
.pr-pick img,.pr-pick-ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--inset);}
.pr-pick-ph{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);color:var(--muted);}
.pr-pick span b{font-family:var(--font-display);font-weight:500;margin-right:4px;}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mp-sheet tr.grp td,:root:not([data-theme="light"]) .mp-sheet tr.grand td,:root:not([data-theme="light"]) .mp-sheet tr.sec th{color:#2d2b2b;}}

/* ============ Admin ============ */
.ad-tabs{margin:0 0 20px;}
.ad-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:20px;}
.ad-kpi{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:2px;}
.ad-kpi span{font-size:12.5px;color:var(--muted);}
.ad-kpi strong{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1.2;color:var(--text);}
.ad-kpi em{font-style:normal;font-size:12px;color:var(--muted);}
.ad-kpi.warn strong{color:var(--warn);}
.ad-chart{display:grid;grid-template-columns:repeat(30,minmax(0,1fr));gap:4px;align-items:end;height:180px;}
.ad-day{display:flex;flex-direction:column;align-items:center;gap:3px;height:100%;}
.ad-stack{flex:1;width:100%;display:flex;flex-direction:column-reverse;justify-content:flex-start;background:var(--inset);border-radius:6px;overflow:hidden;min-height:20px;}
.ad-stack i{display:block;width:100%;}
.ad-stack i.ai{background:var(--ft-deep-orange);}
.ad-stack i.ex{background:var(--ft-gold);}
.ad-day b{font-weight:400;font-size:10.5px;color:var(--text-2);height:14px;}
.ad-day small{font-size:10px;color:var(--muted);height:12px;}
.ad-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.ad-sort{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);}
.ad-sort select{min-width:190px;}
.ad-table td{vertical-align:middle;}
.ad-table select{min-width:130px;padding:8px 36px 8px 12px;}
.ad-user{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;}
.ad-user strong{font-weight:500;color:var(--text);}
.ad-user span{font-size:12px;color:var(--muted);}
.ad-user:hover strong,.ad-user:focus-visible strong{color:var(--primary);}
.ad-user:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px;}
.ad-table td>strong+.hint,.ad-table td .hint{display:block;}
.ad-credit{min-width:110px;font-size:12.5px;}
.ad-credit div{height:6px;border-radius:99px;background:var(--inset);margin-top:4px;overflow:hidden;}
.ad-credit i{display:block;height:100%;background:var(--ft-gradient-h);}
.ad-credit.full span{color:var(--bad);}
.ad-credit-in{width:110px;padding:8px 10px;}
.ad-actions{white-space:nowrap;}
.ad-actions .btn+.btn{margin-left:6px;}
.btn.ad-sm{padding:6px 12px;font-size:12.5px;}
.btn.ad-sm svg{width:14px;height:14px;}
tr.ad-off td{opacity:.55;}
.ad-folder{border:1px solid var(--border);border-radius:14px;padding:12px 14px;margin-top:12px;}
.ad-folder-name{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:500;flex-wrap:wrap;}
.ad-folder-name svg{width:16px;height:16px;color:var(--primary);}
.ad-proj{display:flex;align-items:center;gap:12px;padding:10px 0 0;}
.ad-proj>div{flex:1;min-width:0;}
.ad-proj .hint{display:block;margin:0;}
.ad-link{word-break:break-all;}
.pj-credit{margin:12px 0 4px;display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:13px;color:var(--muted);}
.pj-credit strong{font-weight:500;color:var(--text);}
.pj-credit-bar{grid-column:1/-1;height:6px;border-radius:99px;background:var(--inset);overflow:hidden;}
.pj-credit-bar i{display:block;height:100%;background:var(--ft-gradient-h);}
@media (max-width:900px){
  .ad-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .ad-tabs{grid-template-columns:1fr;}
  .ad-chart{gap:2px;height:140px;}
}
.admin-only[hidden]{display:none !important;}
.auth-switch a{color:var(--primary);text-underline-offset:3px;}
.ad-table td:first-child{min-width:230px;}
.ad-table td{white-space:nowrap;}
.ad-table td:first-child,.ad-table td:first-child *{white-space:normal;}