/* ============ ZeroGrid 和モダン editorial ============ */
:root{
  /* base tokens (user spec) */
  --ink:#1d1d1f; --mid:#5B5B60; --light:#9B9BA1; --bg:#F4F3F1; --accent:#A8443A;
  --panel:#ffffff; --panel-2:#FBFAF8; --line:#E7E4DF; --line-2:#DCD8D1;
  --accent-soft:#f3e4e1; --accent-ink:#A8443A;
  --shadow:0 1px 2px rgba(29,29,31,.03),0 10px 30px rgba(29,29,31,.05);
  --shadow-lg:0 18px 60px rgba(29,29,31,.16);
  --radius:14px; --radius-sm:9px;
  --serif-jp:"Shippori Mincho","Noto Serif JP",serif;
  --serif-en:"Playfair Display",serif;
  --sans:"Inter","Noto Sans JP",system-ui,sans-serif;
  /* dopamine trigger colors — default = muted pastel origami */
  --t-curiosity:#C98A3C; --t-visual:#C46A86; --t-open:#6E6FA8;
  --t-reward:#4F8A6B; --t-empathy:#4E94A0; --t-status:#9A6FA0;
  /* board canvas (dot grid) */
  --board-bg:#f3f2f0; --board-dot:#d4d0c9;
}
:root[data-theme="chic"]{
  --ink:#ECE7DB; --mid:#A9B0A4; --light:#79806f; --bg:#141C16; --accent:#C2A14E;
  --panel:#1B271E; --panel-2:#202E23; --line:#2A3A2E; --line-2:#33473A;
  --accent-soft:#26331f; --accent-ink:#D8BA68;
  --shadow:0 1px 2px rgba(0,0,0,.2),0 10px 30px rgba(0,0,0,.32);
  --shadow-lg:0 18px 60px rgba(0,0,0,.5);
  --t-curiosity:#C2A14E; --t-visual:#B98E5A; --t-open:#7C8F73;
  --t-reward:#5E8F6B; --t-empathy:#6E9484; --t-status:#A99356;
  --board-bg:#10160F; --board-dot:#2c3a2e;
}
:root[data-theme="mono"]{
  --ink:#1d1d1f; --mid:#5B5B60; --light:#9B9BA1; --bg:#F4F3F1; --accent:#1d1d1f;
  --panel:#ffffff; --panel-2:#FAFAF9; --line:#E7E4DF; --line-2:#D6D3CE;
  --accent-soft:#EAE8E5; --accent-ink:#1d1d1f;
  --t-curiosity:#2c2c2e; --t-visual:#4a4a4e; --t-open:#65656b;
  --t-reward:#7f7f86; --t-empathy:#9b9ba1; --t-status:#b6b6bc;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.7;transition:background .4s,color .4s}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea{font-family:inherit}
.hidden{display:none!important}
.jp{font-family:var(--serif-jp)}
::selection{background:var(--accent-soft)}

h1,h2,h3,.en-head{font-family:var(--serif-en);font-style:italic;font-weight:600;letter-spacing:.01em}
.label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.22em;color:var(--light)}

#app{display:grid;grid-template-columns:264px 1fr;height:100vh}

/* ---------- Sidebar ---------- */
.sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:20px 14px;gap:16px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:2px 6px}
.brand-mark{width:38px;height:38px;object-fit:contain;display:block}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-title{font-family:var(--serif-en);font-style:italic;font-weight:600;font-size:18px}
.brand-sub{font-size:9.5px;color:var(--light);letter-spacing:.22em;text-transform:uppercase}

.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);
  color:#fff;font-weight:500;padding:12px 14px;border-radius:10px;font-size:13px;transition:.25s;width:100%;
  letter-spacing:.02em}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-primary svg{width:16px;height:16px}
.btn-ghost{padding:11px 16px;border-radius:10px;color:var(--mid);font-weight:500}
.btn-ghost:hover{background:var(--panel-2)}

.nav{display:flex;flex-direction:column;gap:1px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:9px;color:var(--mid);
  font-weight:500;font-size:13.5px;text-align:left;transition:.15s}
.nav-item:hover{background:var(--panel-2);color:var(--ink)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-ink)}
.nav-ic{width:16px;text-align:center;font-size:13px;opacity:.85}
.nav-count{margin-left:auto;font-size:11px;color:var(--light);font-variant-numeric:tabular-nums}

.nav-section{display:flex;flex-direction:column;gap:5px}
.nav-section-head{display:flex;align-items:center;justify-content:space-between;padding:6px 11px 2px;
  font-size:10px;font-weight:600;color:var(--light);text-transform:uppercase;letter-spacing:.18em}
.icon-btn{width:22px;height:22px;border-radius:6px;color:var(--light);font-size:16px;display:grid;place-items:center}
.icon-btn:hover{background:var(--panel-2);color:var(--ink)}
.folder-list{display:flex;flex-direction:column;gap:1px}
.folder-item{display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:9px;color:var(--mid);
  font-size:13.5px;font-weight:500;text-align:left;transition:.15s}
.folder-item:hover{background:var(--panel-2);color:var(--ink)}
.folder-item.active{background:var(--accent-soft);color:var(--accent-ink)}
.folder-emoji{font-size:14px}
.folder-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.folder-sub{font-size:10px;color:var(--light);font-weight:400}
.folder-count{font-size:11px;color:var(--light)}
.folder-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.folder-edit{opacity:0;color:var(--light);font-size:12px}
.folder-item:hover .folder-edit{opacity:1}
.badge-new{background:var(--accent);color:#fff;font-size:9.5px;font-weight:600;padding:1px 6px;border-radius:7px}

.login-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2)}
.login-dot{width:8px;height:8px;border-radius:50%;background:var(--light);flex-shrink:0}
.login-dot.on{background:#4F8A6B}
.login-label{font-size:11px;color:var(--mid);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-btn{font-size:11px;font-weight:500;color:var(--accent-ink);border:1px solid var(--line-2);padding:4px 10px;border-radius:7px;white-space:nowrap}
.login-btn:hover{border-color:var(--accent)}
.theme-row{display:flex;gap:6px;padding:4px 8px}
.theme-opt{flex:1;padding:7px 4px;border-radius:8px;border:1px solid var(--line);font-size:10.5px;
  color:var(--mid);text-align:center;transition:.18s;font-weight:500}
.theme-opt:hover{border-color:var(--line-2)}
.theme-opt.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:10px;border-top:1px solid var(--line)}
.sidebar-foot .stat{padding:0 8px;font-size:11px;color:var(--light)}

/* ---------- Main ---------- */
.main{display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;gap:14px;padding:18px 32px;border-bottom:1px solid var(--line);
  background:var(--bg);flex-wrap:wrap}
.page-head{display:flex;flex-direction:column;gap:1px;margin-right:8px}
.page-title{font-family:var(--serif-en);font-style:italic;font-weight:600;font-size:22px;line-height:1.1}
.page-sub{font-size:11.5px;color:var(--light);font-family:var(--serif-jp)}
.search-wrap{position:relative;flex:1;min-width:200px;max-width:380px}
.search-ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--light)}
#searchInput{width:100%;padding:9px 12px 9px 36px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--panel);font-size:13px;color:var(--ink);transition:.2s}
#searchInput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip-filter{padding:6px 11px;border-radius:8px;font-size:11.5px;font-weight:500;color:var(--mid);
  border:1px solid var(--line-2);background:var(--panel);transition:.15s;display:inline-flex;align-items:center;gap:6px}
.chip-filter:hover{border-color:var(--light)}
.chip-filter.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip-dot{width:8px;height:8px;border-radius:50%}
.view-meta{margin-left:auto;font-size:12px;color:var(--light);font-variant-numeric:tabular-nums}
.content{flex:1;overflow-y:auto;padding:26px 32px 60px}

/* ---------- Cards grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(286px,1fr));gap:20px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  cursor:pointer;transition:.35s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.card-thumb{position:relative;aspect-ratio:4/3;background:var(--panel-2);overflow:hidden}
.card-thumb img{width:100%;height:100%;object-fit:cover}
.card-thumb .ph{width:100%;height:100%;display:grid;place-items:center;font-size:34px;color:var(--light)}
.card-badges{position:absolute;top:11px;left:11px;display:flex;gap:6px}
.plat-badge{background:rgba(20,20,22,.62);color:#fff;font-size:10px;font-weight:500;padding:3px 9px;border-radius:6px;
  backdrop-filter:blur(4px);text-transform:capitalize;letter-spacing:.04em}
.tension-badge{position:absolute;top:11px;right:11px;background:rgba(255,255,255,.92);color:#1d1d1f;
  font-size:10px;font-weight:500;padding:3px 9px;border-radius:6px;backdrop-filter:blur(4px);font-family:var(--serif-jp)}
.card-fav{position:absolute;bottom:11px;right:11px;width:30px;height:30px;border-radius:50%;
  background:rgba(20,20,22,.5);color:#fff;display:grid;place-items:center;backdrop-filter:blur(4px);font-size:15px;transition:.2s}
.card-fav:hover{background:rgba(20,20,22,.74)}
.card-fav.on{color:#E8C46A}
.card-body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:9px;flex:1}
.card-creator{display:flex;align-items:center;gap:8px}
.avatar{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:11px;font-weight:600;color:#fff;font-family:var(--serif-en);font-style:italic}
.card-creator-name{font-size:12px;font-weight:500;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-title{font-size:16px;font-weight:600;line-height:1.45;font-family:var(--serif-jp);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-oneliner{font-size:12.5px;color:var(--mid);line-height:1.6;font-family:var(--serif-jp);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-hook{font-size:11.5px;color:var(--mid);font-family:var(--serif-jp);background:var(--panel-2);
  border:1px solid var(--line);border-radius:8px;padding:5px 9px;line-height:1.4}
.card-hook b{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.1em;color:var(--accent-ink);text-transform:uppercase;margin-right:3px}
.card-triggers{display:flex;gap:5px;flex-wrap:wrap;margin-top:auto}
.trig-chip{font-size:10px;font-weight:500;padding:3px 9px;border-radius:6px;color:#fff;letter-spacing:.02em}
.card-stats{display:flex;gap:14px;font-size:11px;color:var(--light);padding-top:2px;font-variant-numeric:tabular-nums}

.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:90px 20px;color:var(--light);text-align:center}
.empty-ic{font-size:42px;opacity:.45}
.empty h3{color:var(--mid);font-family:var(--serif-en);font-style:italic;font-weight:600;font-size:19px}
.empty p{font-family:var(--serif-jp);max-width:380px}

/* patterns view */
.pattern-list{display:flex;flex-direction:column;gap:12px;max-width:940px}
.pattern-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;
  display:grid;grid-template-columns:58px 1fr;gap:18px;cursor:pointer;transition:.25s}
.pattern-card:hover{box-shadow:var(--shadow);border-color:var(--line-2)}
.pattern-thumb{width:58px;height:58px;border-radius:11px;object-fit:cover;background:var(--panel-2)}
.pattern-name{font-weight:600;font-size:16px;margin-bottom:2px;font-family:var(--serif-jp)}
.pattern-meta{font-size:11px;color:var(--light);margin-bottom:9px}
.pattern-app{font-size:13px;color:var(--ink);background:var(--accent-soft);padding:9px 13px;border-radius:9px;
  border-left:2px solid var(--accent);font-family:var(--serif-jp);line-height:1.6}

/* ---------- Research view ---------- */
.research-top{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.research-brand{font-family:var(--serif-jp);font-size:13px;color:var(--mid);background:var(--panel);
  border:1px solid var(--line);padding:6px 13px;border-radius:9px}
.creator-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.creator-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  display:flex;flex-direction:column;gap:14px;transition:.25s;position:relative}
.creator-card.has-new{border-color:var(--accent)}
.cc-head{display:flex;align-items:center;gap:12px}
.cc-av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:18px;color:#fff;
  font-family:var(--serif-en);font-style:italic;flex-shrink:0}
.cc-handle{font-weight:600;font-size:15px;font-family:var(--serif-jp)}
.cc-meta{font-size:11px;color:var(--light)}
.cc-new{position:absolute;top:14px;right:14px;background:var(--accent);color:#fff;font-size:10px;font-weight:600;
  padding:3px 9px;border-radius:8px}
.cc-actions{display:flex;gap:6px;margin-left:auto}
.cc-btn{font-size:11px;color:var(--mid);border:1px solid var(--line-2);padding:5px 10px;border-radius:8px;transition:.15s}
.cc-btn:hover{border-color:var(--accent);color:var(--accent-ink)}
.cc-posts{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.cc-post{position:relative;aspect-ratio:1;border-radius:9px;overflow:hidden;background:var(--panel-2);display:block}
.cc-post img{width:100%;height:100%;object-fit:cover;transition:.3s}
.cc-post:hover img{transform:scale(1.06)}
.cc-post.new::after{content:"NEW";position:absolute;top:4px;left:4px;background:var(--accent);color:#fff;
  font-size:8px;font-weight:600;padding:1px 5px;border-radius:5px;letter-spacing:.05em}
.cc-empty{font-size:12px;color:var(--light);font-family:var(--serif-jp);padding:6px 0}
.cc-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--light)}
.cc-err{font-size:11.5px;color:var(--accent);font-family:var(--serif-jp)}
.add-creator{display:flex;gap:8px;margin-top:8px}
.add-creator input{flex:1;padding:10px 13px;border:1px solid var(--line-2);border-radius:10px;font-size:13px;background:var(--panel);color:var(--ink)}
.add-creator input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- Modal ---------- */
.modal-overlay,.drawer-overlay{position:fixed;inset:0;background:rgba(20,20,22,.42);backdrop-filter:blur(3px);
  display:none;z-index:50;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open,.drawer-overlay.open{display:flex}
.modal{background:var(--panel);border-radius:18px;padding:30px;width:100%;max-width:480px;position:relative;
  box-shadow:var(--shadow-lg);animation:pop .22s ease;border:1px solid var(--line)}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
.modal h2{font-size:21px;margin-bottom:7px}
.modal-sub{font-size:13px;color:var(--mid);margin-bottom:18px;line-height:1.6;font-family:var(--serif-jp)}
.modal-close{position:absolute;top:20px;right:20px;width:30px;height:30px;border-radius:8px;color:var(--light);
  font-size:15px;display:grid;place-items:center}
.modal-close:hover{background:var(--panel-2)}
.url-input{width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:11px;font-size:14px;
  background:var(--panel);color:var(--ink);transition:.2s}
.url-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field-label{font-size:11px;font-weight:600;color:var(--light);text-transform:uppercase;letter-spacing:.12em;
  margin:14px 0 6px;display:block}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px;align-items:center}
.modal-actions .btn-primary{width:auto}
.folder-pick{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.fp-chip{padding:6px 11px;border-radius:8px;font-size:12px;font-weight:500;border:1px solid var(--line-2);
  color:var(--mid);display:inline-flex;gap:6px;align-items:center;background:var(--panel)}
.fp-chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}

.job-progress{margin-top:18px;padding:20px;background:var(--panel-2);border-radius:13px;display:flex;
  flex-direction:column;align-items:center;gap:11px;text-align:center}
.spinner{width:30px;height:30px;border:2.5px solid var(--line-2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.job-stage{font-weight:500;font-size:13.5px;font-family:var(--serif-jp)}
.job-hint{font-size:11.5px;color:var(--light)}
.job-error{margin-top:14px;padding:12px 14px;background:var(--accent-soft);color:var(--accent-ink);border-radius:11px;font-size:12.5px;font-family:var(--serif-jp)}

.emoji-row,.color-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.emoji-opt{width:38px;height:38px;border-radius:9px;border:1px solid var(--line-2);font-size:18px;display:grid;place-items:center;background:var(--panel)}
.emoji-opt.on{border-color:var(--accent);background:var(--accent-soft)}
.color-opt{width:28px;height:28px;border-radius:50%;border:2px solid transparent}
.color-opt.on{border-color:var(--ink);transform:scale(1.12)}

/* ---------- Drawer (detail) ---------- */
.drawer{margin-left:auto;height:100%;width:100%;max-width:780px;background:var(--bg);overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:slidein .3s cubic-bezier(.16,1,.3,1)}
@keyframes slidein{from{transform:translateX(50px)}to{transform:translateX(0)}}
.d-cover{width:100%;height:240px;object-fit:cover;background:var(--panel-2)}
.d-cover-ph{height:140px;background:var(--accent)}
.d-head{padding:22px 30px;display:flex;flex-direction:column;gap:12px}
.d-topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  padding:12px 22px;background:var(--bg);border-bottom:1px solid var(--line)}
.d-topbar .actions{display:flex;gap:6px}
.d-iconbtn{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;color:var(--mid);background:var(--panel);border:1px solid var(--line)}
.d-iconbtn:hover{background:var(--panel-2)}
.d-iconbtn.on{color:#D8A93C}
.d-creator{display:flex;align-items:center;gap:11px}
.d-creator .avatar{width:40px;height:40px;font-size:16px}
.d-creator-name{font-weight:600;font-size:16px;font-family:var(--serif-jp)}
.d-creator-sub{font-size:11.5px;color:var(--light)}
.d-title{font-size:25px;line-height:1.4;font-family:var(--serif-jp);font-weight:600}
.d-stats{display:flex;gap:20px;font-size:12.5px;color:var(--mid);margin-top:2px;font-variant-numeric:tabular-nums}
.d-stats b{color:var(--ink);font-weight:600;font-family:var(--serif-en);font-style:italic}
.d-link{font-size:12px;color:var(--accent-ink);text-decoration:none;display:inline-flex;gap:5px;align-items:center}

.d-section{padding:22px 30px;border-top:1px solid var(--line)}
.d-section h3{font-size:11px;font-weight:600;color:var(--light);text-transform:uppercase;letter-spacing:.18em;
  margin-bottom:14px;font-family:var(--sans);font-style:normal}
.why-box{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:13px;padding:18px 20px;font-size:15px;line-height:1.85;color:var(--ink);font-family:var(--serif-jp)}
.b2b-box{background:var(--accent-soft);border-radius:13px;padding:15px 18px;font-size:13.5px;line-height:1.75;
  margin-top:11px;font-family:var(--serif-jp)}
.b2b-box .lbl{font-size:10px;font-weight:600;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.14em;display:block;margin-bottom:5px;font-family:var(--sans)}

.dmap-bars{display:flex;align-items:flex-end;gap:3px;height:124px;margin-bottom:5px}
.dmap-bar{flex:1;min-width:6px;border-radius:4px 4px 0 0;transition:.2s;opacity:.9}
.dmap-bar:hover{opacity:1}
.dmap-axis{display:flex;justify-content:space-between;font-size:10px;color:var(--light);margin-bottom:16px}
.dmap-points{display:flex;flex-direction:column;gap:8px}
.dpoint{display:grid;grid-template-columns:62px 1fr;gap:14px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.dpoint:last-child{border:none}
.dpoint-sec{font-size:12px;font-weight:600;color:var(--ink);font-family:var(--serif-en);font-style:italic}
.dpoint-trig{font-size:10px;font-weight:500;color:#fff;padding:2px 8px;border-radius:6px;display:inline-block;margin-bottom:4px}
.dpoint-desc{font-size:13.5px;color:var(--mid);line-height:1.65;font-family:var(--serif-jp)}
.dpoint-int{display:inline-flex;gap:2px;margin-left:7px}
.dot{width:5px;height:5px;border-radius:50%;background:var(--line-2)}
.dot.on{background:var(--ink)}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:var(--mid)}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend .ld{width:9px;height:9px;border-radius:3px}

.hook-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.hook-cell{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:14px 16px}
.hook-cell .hl{font-size:10px;font-weight:600;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.hook-cell .ht{font-size:13px;color:var(--mid);line-height:1.6;font-family:var(--serif-jp)}

.tech-item,.steal-item{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:15px 17px;margin-bottom:10px}
.tech-item .tn{font-weight:600;font-size:14.5px;margin-bottom:4px;font-family:var(--serif-jp)}
.tech-item .tm{font-size:12.5px;color:var(--mid);margin-bottom:7px;font-family:var(--serif-jp);line-height:1.6}
.tech-item .te{font-size:12px;color:var(--light);background:var(--panel-2);padding:7px 11px;border-radius:8px;font-family:var(--serif-jp)}
.steal-item{border-left:3px solid var(--accent)}
.steal-num{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:7px;background:var(--accent);
  color:#fff;font-size:12px;font-weight:600;margin-right:9px;vertical-align:middle;font-family:var(--serif-en);font-style:italic}
.steal-app{margin-top:9px;font-size:13px;color:var(--ink);background:var(--accent-soft);padding:10px 13px;border-radius:9px;font-family:var(--serif-jp);line-height:1.7}
.steal-app .lbl{font-size:10px;font-weight:600;color:var(--accent-ink);text-transform:uppercase;letter-spacing:.12em;display:block;margin-bottom:4px;font-family:var(--sans)}
.kv{font-size:13.5px;color:var(--mid);line-height:1.75;font-family:var(--serif-jp)}
.kv b{color:var(--ink);font-weight:600}
.transcript{font-size:13px;line-height:1.95;color:var(--mid);white-space:pre-wrap;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;padding:17px 19px;max-height:340px;overflow-y:auto;font-family:var(--serif-jp)}
details.collapse summary{cursor:pointer;font-size:11px;font-weight:600;color:var(--light);text-transform:uppercase;
  letter-spacing:.16em;list-style:none;display:flex;align-items:center;gap:7px;margin-bottom:10px}
details.collapse summary::-webkit-details-marker{display:none}
details.collapse summary::before{content:"+";transition:.2s}
details.collapse[open] summary::before{content:"−"}

.note-area{width:100%;border:1px solid var(--line-2);border-radius:11px;padding:13px 15px;font-size:13.5px;
  resize:vertical;min-height:72px;font-family:var(--serif-jp);background:var(--panel);color:var(--ink);line-height:1.7}
.note-area:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tag-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px;align-items:center}
.tag{background:var(--panel-2);color:var(--mid);font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:8px;display:inline-flex;gap:5px;align-items:center;border:1px solid var(--line)}
.tag x{cursor:pointer;color:var(--light)}
.tag-input{border:1px dashed var(--line-2);border-radius:8px;padding:5px 10px;font-size:11.5px;width:120px;background:var(--panel);color:var(--ink)}
.dfolder-row{display:flex;gap:7px;flex-wrap:wrap}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);
  color:var(--bg);padding:11px 22px;border-radius:11px;font-size:13px;font-weight:500;opacity:0;pointer-events:none;
  transition:.3s;z-index:100;box-shadow:var(--shadow-lg);font-family:var(--serif-jp)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- video type visual indicators ---------- */
.plat-badge.style{background:rgba(168,68,58,.82)}
.style-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif-jp);font-size:14px;font-weight:500;
  color:#fff;background:var(--accent);padding:7px 14px;border-radius:10px}
.style-ic{font-size:16px}
.style-lbl{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.16em;opacity:.8}
.tension-badge{display:inline-flex;align-items:center;gap:5px}
.tension-badge .spark{display:block}
.spark path{vector-effect:non-scaling-stroke}
.type-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:4px}
.fmt-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif-jp);font-size:13px;font-weight:500;
  color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:6px 12px;border-radius:9px}
.fmt-lbl{font-family:var(--sans);font-size:9px;font-weight:600;letter-spacing:.16em;color:var(--accent-ink)}
.type-tension{display:inline-flex;align-items:center;gap:7px;font-family:var(--serif-jp);font-size:12.5px;
  color:var(--mid);background:var(--panel);border:1px solid var(--line);padding:5px 12px;border-radius:9px}
.hook-strip{display:flex;align-items:center;gap:7px;margin-top:2px;flex-wrap:wrap}
.th-lbl{font-size:9px;font-weight:600;letter-spacing:.16em;color:var(--light)}
.hook-label-badge{font-family:var(--serif-jp);font-size:13px;font-weight:500;color:#fff;background:var(--accent);
  padding:4px 11px;border-radius:8px}
.hook-headline{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.hook-type-tag{font-family:var(--serif-jp);font-size:15px;font-weight:600;color:var(--accent-ink);white-space:nowrap}
.hook-type-desc{font-family:var(--serif-jp);font-size:13px;color:var(--mid);line-height:1.6}
.modal-chip{font-size:10px;font-weight:600;letter-spacing:.1em;padding:3px 9px;border-radius:6px;
  border:1px solid var(--line-2);color:var(--light);background:var(--panel)}
.modal-chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* simplified competitor card */
.cc-note{font-size:12.5px;color:var(--mid);font-family:var(--serif-jp);line-height:1.6}
.cc-profile{font-size:12px;color:var(--accent-ink);text-decoration:none;font-weight:500}
.cc-profile:hover{text-decoration:underline}

/* ---------- performance verdict ---------- */
.perf-chip{margin-left:auto;font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:7px;white-space:nowrap}
.v-viral{background:#fcecea;color:#A8443A}
.v-strong{background:#e9f4ee;color:#2f6b4f}
.v-average{background:var(--panel-2);color:var(--mid)}
.v-underperformed{background:#f6efe2;color:#9a7327}
.v-unknown{background:var(--panel-2);color:var(--light)}
:root[data-theme="chic"] .v-viral{background:#3a2420;color:#e6a99c}
:root[data-theme="chic"] .v-strong{background:#1f3328;color:#8fcaa4}
:root[data-theme="chic"] .v-underperformed{background:#332b18;color:#d8b86a}
.perf-banner{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:13px;border:1px solid var(--line)}
.perf-banner.v-viral{background:#fcecea;border-color:#eccfc9}
.perf-banner.v-strong{background:#e9f4ee;border-color:#cfe6da}
.perf-banner.v-average{background:var(--panel)}
.perf-banner.v-underperformed{background:#f6efe2;border-color:#e6d8bd}
.perf-banner.v-unknown{background:var(--panel)}
.perf-big{font-family:var(--serif-en);font-style:italic;font-weight:600;font-size:22px;color:var(--ink)}
.perf-big b{font-style:normal}
.perf-reason{font-family:var(--serif-jp);font-size:13px;color:var(--mid);line-height:1.6}
.perf-er{font-size:11.5px;color:var(--light)}
.why-box.flop{border-left-color:#c79a3a}

/* ---------- auth gate ---------- */
body.pre-auth #app{display:none}
.auth-gate{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,var(--panel-2),var(--bg))}
body.pre-auth .auth-gate{display:flex}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:44px 40px;
  width:100%;max-width:400px;text-align:center;box-shadow:var(--shadow-lg);animation:pop .25s ease}
.auth-mark{width:60px;height:60px;object-fit:contain;display:block;margin:0 auto 18px}
.auth-title{font-family:var(--serif-en);font-style:italic;font-weight:600;font-size:30px}
.auth-sub{font-family:var(--serif-jp);font-size:13.5px;color:var(--mid);margin:8px 0 28px}
.auth-google{display:flex;justify-content:center}
.auth-dev{display:flex;flex-direction:column;gap:10px}
.auth-note{font-size:11px;color:var(--light);font-family:var(--serif-jp);line-height:1.6;margin-top:4px}
.auth-error{margin-top:16px;padding:11px 14px;background:var(--accent-soft);color:var(--accent-ink);
  border-radius:10px;font-size:12.5px;font-family:var(--serif-jp);line-height:1.6}

/* ---------- user row ---------- */
.user-row{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid var(--line);border-radius:9px}
.user-av{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;
  font-size:12px;font-family:var(--serif-en);font-style:italic;flex-shrink:0;background-size:cover;background-position:center}
.user-name{flex:1;font-size:12px;color:var(--ink);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-x{width:24px;height:24px;border-radius:7px;color:var(--light);font-size:13px;display:grid;place-items:center}
.user-x:hover{background:var(--panel-2);color:var(--ink)}
.team-list{display:flex;flex-direction:column;gap:6px;margin-top:14px;max-height:280px;overflow-y:auto}
.team-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px}
.team-item .te-av{width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:12px;background-size:cover}
.team-item .te-mail{flex:1;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.team-item .te-role{font-size:10px;color:var(--light);text-transform:uppercase;letter-spacing:.1em}
.team-item .te-x{color:var(--light);cursor:pointer;font-size:13px}
.team-item .te-x:hover{color:var(--accent)}

/* ---------- Board (Miro-style infinite canvas) ---------- */
.board-toolbar{display:flex;align-items:center;gap:9px;margin-bottom:14px;flex-wrap:wrap}
.board-tool{padding:8px 14px;border-radius:9px;font-size:12.5px;font-weight:500;color:var(--mid);
  border:1px solid var(--line-2);background:var(--panel);transition:.15s}
.board-tool:hover{border-color:var(--accent);color:var(--accent-ink)}
.board-tool.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.board-tool.primary:hover{filter:brightness(1.06);color:#fff}
.board-hint{font-size:11px;color:var(--light);font-family:var(--serif-jp);margin-left:6px}
/* canvas: light surface + dot grid (real Miro), JS controls grid size/offset for pan+zoom */
.board-canvas{position:relative;height:calc(100vh - 150px);min-height:460px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);background-color:var(--board-bg,#f3f2f0);
  background-image:radial-gradient(circle,var(--board-dot,#d4d0c9) 1.4px,transparent 1.6px);
  background-size:24px 24px;touch-action:none}
.board-canvas.tool-select{cursor:grab}
.board-canvas.tool-select.panning{cursor:grabbing}
.board-canvas.tool-sticky,.board-canvas.tool-text{cursor:crosshair}
/* left tool rail (floating) — mirrors Miro's vertical toolbar */
.board-rail{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:var(--shadow);z-index:30}
.brail-btn{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--mid);transition:.13s}
.brail-btn svg{width:21px;height:21px}
.brail-btn:hover{background:var(--panel-2);color:var(--ink)}
.brail-btn.on{background:var(--accent-soft);color:var(--accent-ink)}
.brail-btn.on svg{stroke:var(--accent-ink)}
.brail-div{height:1px;background:var(--line);margin:3px 6px}
.board-surface{position:absolute;top:0;left:0;width:0;height:0;transform-origin:0 0}
.board-blank{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;
  color:var(--light);max-width:360px;pointer-events:none}
.board-blank .bb-ic{font-size:40px;opacity:.4}
.board-blank h3{color:var(--mid);font-family:var(--serif-en);font-style:italic;font-size:19px;margin-top:8px}
.board-blank p{font-family:var(--serif-jp);margin-top:6px;line-height:1.7}
/* zoom control — bottom-right, mirrors Miro's "− 100% + ⊡" */
.board-zoom{position:absolute;right:16px;bottom:16px;display:flex;align-items:center;gap:2px;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:4px;box-shadow:var(--shadow);z-index:30}
.bz-btn{width:30px;height:30px;border-radius:8px;color:var(--mid);font-size:16px;display:grid;place-items:center;transition:.12s}
.bz-btn:hover{background:var(--panel-2);color:var(--ink)}
.bz-label{min-width:48px;height:30px;border-radius:8px;color:var(--ink);font-size:12px;font-weight:600;
  font-variant-numeric:tabular-nums;display:grid;place-items:center}
.bz-label:hover{background:var(--panel-2)}
.bz-div{width:1px;height:18px;background:var(--line);margin:0 2px}
/* video card on canvas */
.bitem{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:12px;
  overflow:hidden;cursor:grab;box-shadow:0 1px 2px rgba(29,29,31,.08),0 6px 16px rgba(29,29,31,.08);
  transition:box-shadow .2s,border-color .2s;user-select:none}
.bitem:hover{border-color:#8aa0ff;box-shadow:0 0 0 2px rgba(66,98,255,.35),0 10px 26px rgba(29,29,31,.14)}
.bitem:hover .bitem-x{opacity:1}
.bitem.dragging{cursor:grabbing;box-shadow:0 0 0 2px rgba(66,98,255,.5),var(--shadow-lg);z-index:40;opacity:.96}
.bitem-x{position:absolute;top:7px;right:7px;z-index:3;width:24px;height:24px;border-radius:7px;
  background:rgba(20,20,22,.55);color:#fff;display:grid;place-items:center;font-size:12px;opacity:0;
  backdrop-filter:blur(4px);transition:.15s}
.bitem-x:hover{background:rgba(20,20,22,.8)}
.bitem-thumb{position:relative;aspect-ratio:4/3;background:var(--panel-2);overflow:hidden;cursor:pointer}
.bitem-thumb img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.bitem-thumb .ph{width:100%;height:100%;display:grid;place-items:center;font-size:28px;color:var(--light)}
.bitem-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:7px}
.bitem-creator{display:flex;align-items:center;gap:7px}
.bitem-creator .avatar{width:20px;height:20px;font-size:10px}
.bitem-cname{font-size:11px;font-weight:500;color:var(--mid);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bitem-title{font-size:13px;font-weight:600;line-height:1.4;font-family:var(--serif-jp);cursor:pointer;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bitem .tension-badge{font-size:9px;padding:2px 7px}
/* sticky note — authentic Miro: square, solid colour (#fff9b1 default), soft shadow, no chrome */
.bnote{position:absolute;width:200px;height:200px;border-radius:4px;cursor:grab;user-select:none;
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.14);display:flex;color:#1d1d1f}
.bnote.dragging{cursor:grabbing;z-index:40;box-shadow:0 0 0 2px rgba(66,98,255,.5),0 14px 30px rgba(0,0,0,.22)}
.bnote:hover .bnote-x,.bnote:hover .bnote-colors{opacity:1}
.bnote-content{flex:1;padding:16px 16px 22px;font-family:var(--sans);font-size:15px;line-height:1.5;
  overflow:hidden;white-space:pre-wrap;word-break:break-word}
.bnote-ph{color:rgba(0,0,0,.32)}
.bnote-edit{flex:1;border:none;background:transparent;resize:none;padding:16px 16px 22px;outline:none;
  font-family:var(--sans);font-size:15px;line-height:1.5;color:#1d1d1f}
.bnote-x{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:6px;color:rgba(0,0,0,.45);
  font-size:12px;display:grid;place-items:center;opacity:0;transition:.15s}
.bnote-x:hover{background:rgba(0,0,0,.14);color:rgba(0,0,0,.75)}
.bnote-colors{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:5px;opacity:0;transition:.15s}
.bnc{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);cursor:pointer;transition:transform .1s}
.bnc:hover{transform:scale(1.2)}
.bnc.on{border-color:rgba(0,0,0,.55)}
/* free text element (transparent, no sticky chrome) */
.bnote.btext{width:auto;height:auto;min-width:120px;max-width:520px;background:transparent!important;
  box-shadow:none;border-radius:6px;color:var(--ink)}
.bnote.btext:hover{box-shadow:0 0 0 1px var(--line-2)}
.bnote.btext.dragging{box-shadow:0 0 0 2px rgba(66,98,255,.5)}
.bnote.btext .bnote-content{padding:6px 10px;font-size:20px;line-height:1.4;font-weight:500;min-height:0}
.bnote.btext .bnote-edit,.bnote.btext .bnote-edit-rich{padding:6px 10px;font-size:20px;line-height:1.4;font-weight:500;min-width:160px;color:var(--ink);outline:none}
.bnote.btext .bnote-edit-rich{caret-color:var(--accent)}
.bnote.btext .bnote-content u,.bnote.btext .bnote-edit-rich u{text-underline-offset:2px}
.bnote.btext .bnote-ph{color:var(--light)}
.bnote.btext .bnote-x{background:rgba(20,20,22,.5);color:#fff}
/* floating text-format toolbar (mirrors Miro's text bar) */
.text-fmt{position:absolute;z-index:60;display:flex;align-items:center;gap:1px;background:var(--panel);
  border:1px solid var(--line);border-radius:11px;padding:4px;box-shadow:var(--shadow-lg)}
.tf-btn{min-width:30px;height:30px;padding:0 7px;border-radius:8px;display:grid;place-items:center;
  color:var(--mid);font-size:15px;transition:.12s}
.tf-btn:hover{background:var(--panel-2);color:var(--ink)}
.tf-btn.b{font-weight:700;font-family:var(--serif-en);font-style:normal}
.tf-btn.i{font-style:italic;font-family:var(--serif-en)}
.tf-btn.u{text-decoration:underline;text-underline-offset:2px}
.tf-div{width:1px;height:17px;background:var(--line);margin:0 4px}
.board-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px;
  margin-top:16px;max-height:62vh;overflow-y:auto;padding:2px}
.bp-card{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:11px;
  overflow:hidden;transition:.2s;padding:0}
.bp-card:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.bp-card.added{opacity:.55;cursor:default}
.bp-thumb{position:relative;aspect-ratio:4/3;background:var(--panel-2);overflow:hidden}
.bp-thumb img{width:100%;height:100%;object-fit:cover}
.bp-thumb .ph{width:100%;height:100%;display:grid;place-items:center;font-size:24px;color:var(--light)}
.bp-added{position:absolute;top:6px;right:6px;background:var(--ink);color:var(--bg);font-size:9.5px;
  font-weight:600;padding:2px 7px;border-radius:6px}
.bp-title{padding:9px 11px 11px;font-size:12px;font-weight:500;font-family:var(--serif-jp);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media(max-width:760px){#app{grid-template-columns:1fr}.sidebar{display:none}}