/* ============ ALVO TT Design Tokens v0.1 ============
   ALVO の alvo/assets/tokens.css と**同じ部品名**にしてある
   （.wrap / .card / .btn / .chip / .sec-h / .panel / .note / .badge）。
   違うのは色だけ ―― ALVO はピンク＋ネイビー、ALVO TT は TikTok の黒・シアン・赤。
   ⚠ シアンは白地だと文字が読めないので、塗り(--ice)と文字(--ice-ink)を分ける。 */
:root{
  --tt-black:#0e0e16; --tt-ink:#1b1b26;
  --ice:#25f4ee; --ice-ink:#0a7f78; --ice-soft:#e1fbf9; --ice-mist:#f2fdfc;
  --flare:#fe2c55; --flare-ink:#c8123c; --flare-soft:#ffe9ee; --flare-mist:#fff5f7;
  --odd-blue:#165eeb; --odd-blue-soft:#e6eefc;

  --bg:#f7f7fa; --surface:#ffffff; --border:#e9e9f0; --border-strong:#d9d9e4;
  --text:#17171f; --text2:#63636f; --text3:#9a9aa8;
  --ok:#0a7f78; --warn:#b06a00; --bad:#c8123c;

  --grad:linear-gradient(120deg,var(--tt-black),#3a2b4d 48%,var(--flare));
  --grad-tt:linear-gradient(120deg,var(--ice),var(--flare));
  --grad-flare:linear-gradient(120deg,#ff5c7a,var(--flare));
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(14,14,22,.04),0 8px 24px -12px rgba(14,14,22,.12);
  --shadow-hover:0 2px 4px rgba(14,14,22,.06),0 16px 32px -12px rgba(254,44,85,.20);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;background:var(--bg);color:var(--text);
  font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
.hide{display:none!important}

/* ---- ヘッダー（すりガラス・ALVOと同じ作り） ---- */
header.alvott{background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid rgba(233,233,240,.7);position:sticky;top:0;z-index:10}
.hwrap{max-width:1120px;margin:0 auto;padding:10px 28px;display:flex;align-items:center;gap:16px}
.logo{display:flex;align-items:center;gap:10px}
.logo3d{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(254,44,85,.30));
  transition:transform .18s}
.logo:hover .logo3d{transform:scale(1.1) rotate(-4deg)}
.logotype{font-size:22px;font-weight:900;letter-spacing:.06em;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;display:flex;align-items:center;gap:2px;line-height:1.2}
.logotype .play{width:19px;height:19px;border-radius:50%;background:var(--grad-flare);display:inline-flex;
  align-items:center;justify-content:center;margin-left:1px}
.logotype .tt{background:var(--grad-tt);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-left:6px;letter-spacing:.02em}
.tagline{font-size:9.5px;color:var(--text3);letter-spacing:.14em;font-weight:600;margin-top:-2px}
.hnav{display:flex;gap:4px;margin-left:14px}
.hnav a{font-size:12.5px;font-weight:700;color:var(--text2);padding:7px 13px;border-radius:999px;white-space:nowrap}
.hnav a:hover{background:var(--flare-mist);color:var(--flare)}
.hnav a.on{background:var(--flare-soft);color:var(--flare)}
.hrefresh{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--text2);
  background:var(--surface);border:1.5px solid var(--border-strong);border-radius:999px;
  padding:6px 14px;cursor:pointer;white-space:nowrap;font-family:inherit}
.hrefresh:hover{border-color:#f7c0cd;color:var(--flare)}
.hrefresh:disabled{opacity:.6;cursor:default}
.tenant{margin-left:14px;font-size:12px;color:var(--text2);display:flex;align-items:center;gap:12px}

/* ---- オーロラ背景（ALVOと同じ。色だけTikTok寄り） ---- */
.bgfx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bgfx i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.42;
  animation:drift 26s ease-in-out infinite alternate}
.bgfx i:nth-child(1){width:560px;height:560px;background:#b6f4f0;top:-180px;left:-120px}
.bgfx i:nth-child(2){width:480px;height:480px;background:#ffd2dd;top:60px;right:-160px;animation-delay:-9s}
.bgfx i:nth-child(3){width:520px;height:520px;background:#cfdcff;bottom:-200px;left:22%;animation-delay:-17s}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.12)}}

/* ---- 共通の枠 ---- */
.wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:24px 28px 60px}
.head h1{font-size:20px;font-weight:900;letter-spacing:.02em;display:flex;align-items:center;gap:9px}
.head p{color:var(--text2);font-size:12.5px;margin-top:6px;max-width:74ch}
.sec{margin-top:26px}
.sec-h{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.sec-h .bar{width:5px;height:18px;border-radius:3px;background:var(--grad-tt)}
.sec-h h2{font-size:14.5px;font-weight:800;letter-spacing:.03em}
.sec-h .cnt{font-size:11px;color:var(--text3);font-weight:600}

/* ---- ヒーロー（ALVOのダッシュボードと同じ骨格） ---- */
/* 高さの決め方（切れないように計算してある）:
   マスコット 205px 幅 → 実寸 205×446/375 ≒ 244px
   + 跳ねる動き -12px + 下へのはみ出し 14px = 上下に 270px 必要
   + .hero-in の上下 padding 28px×2 = 56px  →  min-height 326px
   ⚠ overflow:hidden なので、足りないと**黙って上が切れる**（実際に切れていた） */
.hero{position:relative;border-radius:24px;overflow:hidden;min-height:326px;
  background:linear-gradient(135deg,#f3fdfc 0%,#e1fbf9 30%,#f4f0ff 62%,#ffe9ee 100%);
  border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);display:flex;align-items:stretch}
.hero .blobs i{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
  animation:drift 22s ease-in-out infinite alternate}
.hero .blobs i:nth-child(1){width:400px;height:400px;background:#8ef0ea;top:-150px;left:-70px}
.hero .blobs i:nth-child(2){width:360px;height:360px;background:#c9d6ff;bottom:-170px;left:38%;animation-delay:-8s}
.hero .blobs i:nth-child(3){width:340px;height:340px;background:#ffb3c4;top:-110px;right:-80px;animation-delay:-15s}
.hero .word{position:absolute;left:18px;bottom:-34px;font-size:150px;font-weight:900;letter-spacing:.02em;
  line-height:1;background:var(--grad-tt);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.10;pointer-events:none;user-select:none}
.hero-in{position:relative;z-index:1;display:flex;align-items:center;gap:20px;width:100%;padding:28px 38px}
.hero-copy{max-width:560px}
.kicker{font-size:11px;font-weight:800;letter-spacing:.22em;color:var(--flare);margin-bottom:9px}
.hero h1{font-size:28px;font-weight:900;line-height:1.35;letter-spacing:.01em;color:var(--tt-black)}
.hero h1 .gr{background:var(--grad-tt);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:var(--text2);font-size:13px;margin-top:10px;max-width:440px}
.cta-row{margin-top:18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-mascot{margin-left:auto;width:205px;flex-shrink:0;align-self:flex-end;margin-bottom:-14px;
  filter:drop-shadow(0 18px 30px rgba(14,14,22,.28));animation:bob 5.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(1.4deg)}}

/* ---- カード ---- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:14px}
.card{background:rgba(255,255,255,.74);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.75);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:18px 20px;transition:transform .15s,box-shadow .15s,border-color .15s;position:relative;display:block}
.card.link{cursor:pointer}
.card.link:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover);border-color:#f7c0cd}
.card h3{font-size:14px;font-weight:800;display:flex;align-items:center;gap:8px}
.card p{font-size:12px;color:var(--text2);margin-top:5px;line-height:1.65}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px 22px}
.panel>h3{font-size:12.5px;font-weight:800;color:var(--text2);letter-spacing:.06em;margin-bottom:12px}

/* ---- 数字タイル ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.tile{background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:15px 18px}
.tile b{display:block;font-size:26px;font-weight:900;line-height:1.2;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.tile b.ice{color:var(--ice-ink)} .tile b.flare{color:var(--flare)} .tile b.sm{font-size:15px;padding-block:5px}
.tile span{font-size:10.5px;color:var(--text3);font-weight:700;letter-spacing:.1em}

/* ---- 部品 ---- */
.badge{font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:999px;letter-spacing:.05em}
.badge.new{background:var(--grad-flare);color:#fff}
.badge.dry{background:var(--ice-soft);color:var(--ice-ink)}
.badge.soon{background:#eceef4;color:var(--text3)}
.chip{background:var(--flare-mist);border:1px solid #ffd7e0;border-radius:999px;padding:4px 13px;font-size:11.5px;
  color:var(--flare-ink);font-weight:700}
.chip b{font-weight:900}
.chip.gray{background:#f2f3f7;border-color:var(--border);color:var(--text2)}
.chip.ice{background:var(--ice-mist);border-color:#bdf1ed;color:var(--ice-ink)}
.btn{background:var(--grad-flare);color:#fff;border:none;border-radius:12px;padding:11px 22px;font-size:13.5px;
  font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:.02em;
  box-shadow:0 4px 14px -4px rgba(254,44,85,.5);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px -4px rgba(254,44,85,.55)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.pill{border-radius:999px}
.btn.lg{padding:13px 28px;font-size:14.5px}
.btn.ghost{background:var(--surface);color:var(--flare);border:1.5px solid #f7c0cd;box-shadow:none}
.btn.ghost:hover{background:var(--flare-mist)}
.btn.ice{background:linear-gradient(120deg,#4ff7f1,var(--ice));color:#05302d;
  box-shadow:0 4px 14px -4px rgba(37,244,238,.55)}
.btn.sm{padding:7px 15px;font-size:12px;border-radius:9px}
input[type=text],input[type=password],input[type=number],select,textarea{width:100%;background:var(--surface);
  border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;
  font-family:inherit;color:var(--text)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--flare);
  box-shadow:0 0 0 3px var(--flare-soft)}
label{display:block;font-size:11.5px;font-weight:800;color:var(--text2);margin:0 0 5px}
.fld{margin-bottom:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.note{font-size:11.5px;color:var(--text2);background:#f4f5f9;border-radius:var(--radius-sm);padding:9px 13px;line-height:1.7}
.note.p{background:var(--flare-mist);color:var(--flare-ink)}
.note.i{background:var(--ice-mist);color:var(--ice-ink)}
.empty{color:var(--text3);font-size:12.5px;text-align:center;padding:34px 0}
.emptybox{display:flex;align-items:center;gap:18px;justify-content:center;padding:26px}
.emptybox img{width:120px;flex:none;animation:bob 5.5s ease-in-out infinite}
.emptybox b{display:block;font-size:14.5px;font-weight:800;color:var(--text)}
.emptybox span{display:block;font-size:12px;color:var(--text2);margin:5px 0 12px}
footer.alvott{text-align:center;padding:26px;color:var(--text3);font-size:11px;position:relative;z-index:1}

/* ---- 表 ---- */
.tbl{background:rgba(255,255,255,.8);backdrop-filter:blur(10px);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto}
table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:600px}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--border)}
thead th{font-size:10.5px;letter-spacing:.1em;color:var(--text3);font-weight:800;background:rgba(247,247,250,.7)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--flare-mist)}
td strong{font-weight:800}
td.n{font-variant-numeric:tabular-nums}

/* ---- クリップ（9:16） ---- */
.clips{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:12px}
.clip{display:flex;flex-direction:column;gap:6px}
.clip .fr{aspect-ratio:9/16;border-radius:12px;overflow:hidden;position:relative;
  border:1.5px solid var(--border);background:#f0f0f4;box-shadow:var(--shadow);transition:transform .15s}
.clip .fr img,.clip .fr video{width:100%;height:100%;object-fit:cover;display:block}
.clip .fr video{background:#000}
.clip .fr .tag{position:absolute;left:6px;bottom:6px;font-size:9.5px;font-weight:700;color:#fff;
  background:rgba(14,14,22,.6);padding:2px 7px;border-radius:999px;backdrop-filter:blur(4px)}
.clip.ok .fr{border-color:var(--ice);box-shadow:0 0 0 3px var(--ice-soft),var(--shadow)}
.clip.ng .fr{border-color:#f7c0cd;opacity:.5}
.clip .row{display:flex;gap:5px}
.clip .row button{flex:1;font-size:11px;font-weight:800;padding:5px 2px;border:1.5px solid var(--border-strong);
  border-radius:8px;background:var(--surface);color:var(--text2);cursor:pointer;font-family:inherit}
.clip .row button:hover{border-color:#f7c0cd;color:var(--flare)}
.clip.ok .row .y{background:var(--ice-soft);color:var(--ice-ink);border-color:transparent}
.clip.ng .row .n{background:var(--flare-soft);color:var(--flare);border-color:transparent}
.clip .why{font-size:10px;font-weight:700;color:var(--flare);text-align:center}
.reasons{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.reasons .chip{cursor:pointer;font-size:10.5px;padding:3px 10px}
.reasons .chip:hover{background:var(--flare-soft)}

/* ---- 選択肢 ---- */
.opts{display:flex;flex-direction:column;gap:7px}
.opt{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1.5px solid var(--border-strong);
  border-radius:var(--radius-sm);background:var(--surface);font-size:13px;cursor:pointer;
  transition:border-color .15s,background .15s}
.opt:hover{border-color:#bdf1ed}
.opt.on{border-color:var(--ice);background:var(--ice-mist);font-weight:800}
.opt .dot{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--border-strong);flex:none}
.opt.on .dot{border-color:var(--ice-ink);background:var(--ice-ink);box-shadow:inset 0 0 0 2.5px var(--ice-soft)}
.opt .sub{margin-left:auto;font-size:10.5px;color:var(--text3);font-weight:700}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tags .chip{cursor:pointer;background:var(--surface);border-color:var(--border-strong);color:var(--text2)}
.tags .chip:hover{border-color:#bdf1ed;color:var(--ice-ink)}
.tags .chip.on{background:var(--ice-mist);border-color:var(--ice);color:var(--ice-ink)}

/* ---- 進捗の帯 ---- */
.bar-wrap{height:6px;border-radius:999px;background:#eceef4;overflow:hidden}
.bar-wrap i{display:block;height:100%;background:var(--grad-tt);transition:width .4s}
.log{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.75;color:var(--text2);
  background:#f4f5f9;border-radius:var(--radius-sm);padding:11px 14px;max-height:190px;overflow:auto;white-space:pre-wrap}

/* ---- 操作バー ---- */
.actbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--border)}
.actbar .sum{font-size:12.5px;color:var(--text2)}
.actbar .sum b{font-weight:900;color:var(--ice-ink)}
.actbar .right{margin-left:auto;display:flex;gap:9px}

/* ---- ログイン ---- */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1}
.login .box{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.85);
  border-radius:24px;box-shadow:var(--shadow);padding:34px 30px;width:100%;max-width:360px;text-align:center}
.login img.m{width:150px;margin:0 auto 6px;animation:bob 5.5s ease-in-out infinite}
.login .logotype{justify-content:center;font-size:30px}
.login .tagline{margin-bottom:20px}
.err{color:var(--bad);font-size:12px;min-height:18px;margin-top:8px;font-weight:700}

@media (max-width:760px){
  .hwrap{padding:10px 14px;flex-wrap:wrap;gap:8px}
  .hnav{margin-left:0;order:3;width:100%;overflow-x:auto}
  .tenant{display:none}
  .wrap{padding:16px 14px 50px}
  .cards,.grid2,.grid3{grid-template-columns:1fr}
  .hero-in{flex-direction:column;padding:24px 20px}
  .hero h1{font-size:21px}
  .hero .word{font-size:84px;bottom:-18px}
  .hero{min-height:0}
  .hero-mascot{width:160px;margin:10px auto -10px}
  /* 🚨 親指で押せる大きさに。36px の select/input は指では外しやすい
     （2026-09-18・実機で計測: 33〜36px だった） */
  input[type=text],input[type=password],input[type=number],select,textarea,
  .btn,button{min-height:44px}
  .btn.sm,button.sm{min-height:38px}
  .row button{min-height:40px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}