/* ═══ ホームページの更新｜画面のデザイン（2026-10-20 作り直し・2回目） ═══
   手本：今どきのスマホアプリ（Instagram・X の投稿画面、Shopify・STORES の店主向けアプリ、note のエディタ）
   - 色は青1色＋状態の色。暗い画面にも合わせる。面は白＋うすい線＋やわらかい影、角は大きめ
   - 日本語の見出し・ボタンは文字を詰める（palt）。数字は等幅
   - 押すところは 44px 以上、入力の文字は 16px 以上（スマホで勝手に拡大されない）
   - スマホ：上のバー＋下のタブ（真ん中が「＋」）。パソコン（960px〜）：左のメニュー。書く画面（1100px〜）：右にサイトでの見え方 */

@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}

:root{
  --bg:#f4f5f7;--surface:#fff;--surface-2:#f0f2f5;--line:#e6e8ec;--line-2:#d5d9df;
  --ink:#111318;--sub:#5b636e;--faint:#6b7280;
  --accent:#2f5bea;--accent-d:#2249c9;--accent-soft:#eaf0ff;--accent-ring:rgba(47,91,234,.22);
  --ok:#15803d;--ok-soft:#e3f5e9;--warn:#985a06;--warn-soft:#fdf1dc;--danger:#cf3326;--danger-soft:#fdebe9;
  --t-works:#2f5bea;--t-news:#c2570c;--t-diary:#0f7b70;
  --r:14px;--r-lg:20px;--r-xl:26px;
  --shadow-1:0 1px 2px rgba(17,19,24,.04),0 2px 6px rgba(17,19,24,.05);
  --shadow-2:0 10px 30px rgba(17,19,24,.12),0 2px 6px rgba(17,19,24,.06);
  --shadow-float:0 14px 40px rgba(17,19,24,.18),0 3px 10px rgba(17,19,24,.08);
  --font:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  --side-w:272px;--bar-h:58px;--tab-h:66px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0d0f13;--surface:#16191f;--surface-2:#1e222a;--line:#262b34;--line-2:#363c47;
    --ink:#eff2f6;--sub:#a4acb8;--faint:#8f98a6;
    --accent:#5f80ff;--accent-d:#7c97ff;--accent-soft:#1a2347;--accent-ring:rgba(95,128,255,.3);
    --ok:#4ade80;--ok-soft:#11301d;--warn:#f4b75e;--warn-soft:#33260d;--danger:#ff7b6f;--danger-soft:#3a1a17;
    --t-works:#87a2ff;--t-news:#f6a55c;--t-diary:#4fd1c5;
    --shadow-1:none;--shadow-2:0 14px 36px rgba(0,0,0,.55);--shadow-float:0 16px 44px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
a{color:var(--accent);text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,.btn,.chip,.choice-tx b,.post-title,.nudge-tx b,.stat b{font-feature-settings:"palt" 1}
h1,h2,h3{letter-spacing:.02em}
.ic{width:20px;height:20px;flex:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.t-works{--tc:var(--t-works)}.t-news{--tc:var(--t-news)}.t-diary{--tc:var(--t-diary)}

/* ── ボタン ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:var(--r);border:1px solid transparent;background:var(--surface-2);color:var(--ink);font-size:15px;font-weight:700;line-height:1.3;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,box-shadow .15s,transform .08s,border-color .15s}
.btn:active{transform:scale(.97)}
.btn .ic{width:19px;height:19px}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(47,91,234,.25),inset 0 1px 0 rgba(255,255,255,.14)}
.btn.primary:hover{background:var(--accent-d)}
.btn.primary.danger{background:var(--danger);box-shadow:none}
.btn.secondary{background:var(--surface);border-color:var(--line-2)}
.btn.secondary:hover{background:var(--surface-2)}
.btn.ghost{background:transparent;color:var(--sub)}
.btn.ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn.round{width:46px;padding:0;border-radius:50%}
.btn.block{display:flex;width:100%}
.btn.lg{min-height:54px;font-size:16px}
.btn[disabled]{opacity:.5;pointer-events:none}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:0;background:transparent;color:var(--ink);cursor:pointer;flex:none;transition:background .12s}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn .ic{width:22px;height:22px}
.link{background:none;border:0;padding:4px 2px;color:var(--accent);font-weight:700;cursor:pointer}
.link.sub{color:var(--sub);font-weight:500}

/* ── 入力 ── */
.stack{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--sub)}
.field-label .ic{width:16px;height:16px}
.input{width:100%;min-height:48px;padding:11px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);font-size:16px;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.input::placeholder{color:var(--faint)}
.req{font-style:normal;font-size:11px;font-weight:800;color:var(--danger);background:var(--danger-soft);padding:1px 8px;border-radius:999px;margin-left:8px}
.field-err{color:var(--danger);font-size:13px;margin:6px 0 0;font-weight:700}

/* ── お知らせの帯 ── */
.notice{display:flex;align-items:flex-start;gap:10px;padding:13px 15px;border-radius:var(--r);margin:0 0 14px;font-size:14px;line-height:1.65}
.notice .ic{margin-top:2px}
.notice ul{margin:0;padding-left:1.1em}
.notice p{margin:0 0 4px}
.notice .btn{margin-top:10px}
.notice.err{background:var(--danger-soft);color:var(--danger)}
.notice.warn{background:var(--warn-soft);color:var(--warn)}
.notice.info{background:var(--accent-soft);color:var(--ink);align-items:center;flex-wrap:wrap;gap:6px 10px}
.notice.info>.ic{color:var(--accent);margin:0}
.notice.tip{background:var(--surface);border:1px solid var(--line);color:var(--sub);font-size:13px}
.notice.tip>.ic{color:var(--accent)}
.notice-acts{display:flex;gap:6px;margin-left:auto}
.flash{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r);background:var(--ok-soft);color:var(--ok);font-weight:700;margin:8px 0}
.demo{background:#fff1bf;color:#5a4500;font-size:12.5px;padding:7px 16px;text-align:center;line-height:1.6;position:relative;z-index:40}
.demo a{color:#5a4500;font-weight:800;margin-left:.6em;text-decoration:underline}

/* ── ログイン ── */
.m-auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(900px 420px at 50% -120px,var(--accent-soft),transparent 70%),var(--bg)}
.auth{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px}
.auth-card{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow-2);padding:30px 26px}
.auth-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:15px;margin-bottom:26px}
.logo{width:34px;height:34px;color:var(--accent);flex:none}
.auth-h{font-size:24px;line-height:1.4;margin:0 0 8px}
.auth-lead{color:var(--sub);font-size:14.5px;line-height:1.8;margin:0 0 22px}
.center{text-align:center}
.big-ic{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;margin:0 auto 16px;background:var(--accent-soft);color:var(--accent)}
.big-ic .ic{width:30px;height:30px}
.big-ic.warn{background:var(--warn-soft);color:var(--warn)}
.tips{margin:0 0 20px;padding:14px 16px 14px 34px;background:var(--surface-2);border-radius:var(--r);font-size:13.5px;line-height:1.8;color:var(--sub)}
.auth-foot{font-size:12.5px;color:var(--faint);margin:18px 0 0;text-align:center}
.divider{display:flex;align-items:center;gap:12px;margin:28px 0 14px;color:var(--faint);font-size:12.5px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.accounts{display:grid;gap:8px}
.accounts form{margin:0}
.account{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r);cursor:pointer;text-align:left;transition:border-color .15s,background .15s,transform .08s}
.account:hover{border-color:var(--accent);background:var(--accent-soft)}
.account:active{transform:scale(.99)}
.account>.ic{color:var(--faint);width:18px;height:18px}
.account-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.account-tx b{font-size:14.5px}
.account-tx small{color:var(--sub);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── アプリの器 ── */
.shell{min-height:100vh}
.side{display:none}
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;height:var(--bar-h);padding:0 6px 0 14px;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);border-bottom:1px solid transparent;transition:border-color .2s}
.topbar.scrolled{border-bottom-color:var(--line)}
.company-btn{display:flex;align-items:center;gap:10px;min-width:0;flex:1;color:var(--ink);font-size:16px}
.company-btn b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.company-btn .ic{width:16px;height:16px;color:var(--faint)}
.top-actions{display:flex;align-items:center;gap:4px;margin-left:auto}
.avatar{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,var(--accent),#7a5bff);color:#fff;font-weight:800;font-size:15px}
.avatar.dark{background:var(--ink);color:var(--bg)}
.content{max-width:900px;margin:0 auto;padding:6px 16px calc(var(--tab-h) + 48px + env(safe-area-inset-bottom))}

/* 下のタブ（浮いた板） */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0 14px calc(10px + env(safe-area-inset-bottom));pointer-events:none}
.tabbar-in{pointer-events:auto;max-width:420px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--tab-h);padding:0 22px;border-radius:24px;background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border:1px solid var(--line);box-shadow:var(--shadow-float)}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:700;color:var(--faint);padding:6px 0}
.tab.on{color:var(--accent)}
.tab .ic{width:24px;height:24px}
.tab-add{width:56px;height:56px;border-radius:18px;border:0;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(47,91,234,.4),inset 0 1px 0 rgba(255,255,255,.18);cursor:pointer;transition:transform .12s}
.tab-add:active{transform:scale(.92)}
.tab-add .ic{width:28px;height:28px;stroke-width:2.4}

.hide-sm{display:none!important}
@media (min-width:960px){
  .shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr)}
  .side{display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow:auto;padding:20px 14px 16px;border-right:1px solid var(--line);background:var(--surface)}
  .m-app .topbar{display:none}
  .tabbar{display:none}
  .content{padding:40px 48px 80px}
  .hide-sm{display:inline-flex!important}
}

/* 左のメニュー（パソコン） */
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14.5px;padding:2px 6px 4px}
.company{display:flex;align-items:center;gap:10px;padding:10px;border-radius:var(--r);border:1px solid var(--line);color:var(--ink);background:var(--surface)}
a.company:hover{background:var(--surface-2)}
.company-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.company-tx b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.company-tx small{font-size:11.5px;color:var(--sub)}
.company-go{width:16px;height:16px;color:var(--faint)}
.side-nav{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;color:var(--sub);font-size:14.5px;font-weight:600}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item.on{background:var(--accent-soft);color:var(--accent);font-weight:800}
.nav-item span{flex:1}
.nav-item em{font-style:normal;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.nav-item.on em{color:var(--accent)}
.side-menu{margin-top:auto;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:10px}
.support{display:flex;gap:8px;font-size:12px;color:var(--faint);margin:6px 6px 0;line-height:1.65}
.support .ic{width:16px;height:16px;margin-top:2px}

/* メニューの行 */
.menu{display:flex;flex-direction:column;margin:0 0 8px}
.menu form{margin:0}
.menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:10px 12px;border:0;background:none;border-radius:14px;color:var(--ink);font-size:15px;text-align:left;cursor:pointer;transition:background .12s}
.menu-item:hover{background:var(--surface-2)}
.menu-item>span{flex:1;display:flex;flex-direction:column;line-height:1.4}
.menu-item small{font-size:12px;color:var(--faint)}
.menu-item .menu-sub{width:16px;height:16px;color:var(--faint)}
.menu-item.danger{color:var(--danger)}
.side .menu-item{min-height:38px;padding:7px 10px;font-size:14px;color:var(--sub)}
.side .menu-item .ic{width:18px;height:18px}

/* ── ホーム ── */
.hero-head{margin:14px 0 16px}
.hello{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 2px;font-size:13.5px;font-weight:700;color:var(--sub)}
.hello span{font-weight:500;color:var(--faint)}
.hero-head h1{font-size:28px;line-height:1.3;margin:0}
@media (min-width:960px){.hero-head{margin-top:0}.hero-head h1{font-size:32px}}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}
.stat{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);min-width:0}
.stat span{font-size:12px;font-weight:700;color:var(--sub)}
.stat b{font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b.late{color:var(--warn)}
.stat b small{font-size:13px;font-weight:700;color:var(--faint);margin-left:3px;letter-spacing:0}
@media (max-width:380px){.stat b{font-size:20px}}
.nudge{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,var(--accent-soft) 40%,var(--surface)));border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);color:var(--ink);margin:0 0 18px}
a.nudge:hover{border-color:var(--accent)}
.nudge.good{background:var(--surface);border-color:var(--line)}
.nudge.first{align-items:flex-start}
.nudge-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--accent);color:#fff}
.nudge-ic.warn{background:var(--warn);color:#fff}
.nudge-ic.ok{background:var(--ok-soft);color:var(--ok)}
.nudge-ic .ic{width:22px;height:22px}
.nudge-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.5}
.nudge-tx b{font-size:15.5px}
.nudge-tx small{font-size:13px;color:var(--sub)}
.nudge-go{width:20px;height:20px;color:var(--accent)}
.steps{margin:8px 0 14px;padding-left:1.3em;font-size:14px;color:var(--sub);line-height:1.9}
.nudge .btn{align-self:flex-start}

.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 28px}
.quick-item{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-height:112px;padding:14px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);color:var(--ink);box-shadow:var(--shadow-1);transition:transform .14s,box-shadow .18s,border-color .15s}
.quick-item:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:transparent}
.quick-item:active{transform:scale(.98)}
.quick-item .choice-tx{display:flex;flex-direction:column;gap:2px}
.quick-item .choice-tx b{font-size:14px;line-height:1.4}
.quick-item small{display:none;font-size:12px;color:var(--sub);line-height:1.5}
.quick-item .choice-go{display:none}
@media (min-width:720px){.quick-item small{display:block}.quick-item{min-height:128px;padding:16px}}
.choice-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--tc,var(--accent)) 14%,transparent);color:var(--tc,var(--accent))}
.choice-ic .ic{width:22px;height:22px}

.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.sec-head h2{font-size:19px;margin:0}
.view-toggle{display:inline-flex;padding:3px;border-radius:12px;background:var(--surface-2)}
.vt{display:grid;place-items:center;width:36px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--faint);cursor:pointer}
.vt .ic{width:18px;height:18px}
.vt[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.filters{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -16px 12px;padding:2px 16px}
.filters::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);color:var(--sub);font-size:14px;font-weight:700;transition:background .12s,color .12s}
.chip:hover{color:var(--ink)}
.chip em{font-style:normal;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.chip.on em{color:inherit;opacity:.65}
.search{display:flex;align-items:center;gap:8px;height:46px;padding:0 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);margin:0 0 12px;color:var(--faint)}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}
.search input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:16px;color:var(--ink)}

/* 記事の一覧（一覧 ⇄ 写真の並び） */
.posts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.post{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 10px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--ink);transition:transform .1s,box-shadow .15s,border-color .15s}
.post:hover{box-shadow:var(--shadow-2);border-color:transparent}
.post:active{transform:scale(.99)}
.thumb{position:relative;width:68px;height:68px;border-radius:14px;overflow:hidden;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--tc,var(--accent)) 12%,transparent);color:var(--tc,var(--accent))}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb>.ic{width:26px;height:26px}
.thumb-n{position:absolute;right:5px;bottom:5px;font-style:normal;font-size:10.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.55);border-radius:7px;padding:0 6px;line-height:17px}
.thumb-type{display:none}
.post-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.post-title{font-weight:700;font-size:15px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:12.5px;color:var(--sub)}
.post-go{width:18px;height:18px;color:var(--faint)}
.type-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:800;padding:2px 9px;border-radius:999px;color:var(--tc,var(--accent));background:color-mix(in srgb,var(--tc,var(--accent)) 12%,transparent);white-space:nowrap}
.type-chip .ic{width:13px;height:13px}
.status{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--sub);white-space:nowrap}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--faint)}
.status.on{color:var(--ok)}
.status.on::before{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 20%,transparent)}
.posts.is-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
@media (min-width:720px){.posts.is-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}}
.posts.is-grid .post{position:relative;display:block;padding:0;border:0;border-radius:6px;overflow:hidden;aspect-ratio:1;box-shadow:none;background:var(--surface-2)}
@media (min-width:720px){.posts.is-grid .post{border-radius:14px}}
.posts.is-grid .thumb{width:100%;height:100%;border-radius:0}
.posts.is-grid .thumb>.ic{width:30px;height:30px}
.posts.is-grid .post-main,.posts.is-grid .post-go,.posts.is-grid .thumb-n{display:none}
.posts.is-grid .thumb-type{display:grid;place-items:center;position:absolute;left:6px;top:6px;width:24px;height:24px;border-radius:8px;background:rgba(0,0,0,.5);color:#fff}
.posts.is-grid .thumb-type .ic{width:14px;height:14px}
.posts.is-grid .post.is-draft::after{content:"下書き";position:absolute;right:6px;bottom:6px;padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:800}
.no-hit{color:var(--sub);text-align:center;padding:24px 0}
.rows{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-1)}
.rows li+li{border-top:1px solid var(--line)}
.rows form{margin:0}
.row{display:flex;align-items:center;gap:12px;width:100%;padding:12px;color:var(--ink);background:none;border:0;text-align:left;cursor:pointer}
.row:hover{background:var(--surface-2)}
.row-main{flex:1;min-width:0;display:flex;flex-direction:column}
.row-title{font-weight:700}
.row-meta{font-size:12.5px;color:var(--sub)}
.row-go{width:18px;height:18px;color:var(--faint)}

.empty{text-align:center;padding:44px 20px;background:var(--surface);border:1px dashed var(--line-2);border-radius:var(--r-lg)}
.empty h2{font-size:18px;margin:0 0 6px}
.empty p{color:var(--sub);font-size:14px;line-height:1.8;margin:0 auto 18px;max-width:340px}
.empty-ic{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;margin:0 auto 14px;background:var(--accent-soft);color:var(--accent)}
.empty-ic .ic{width:30px;height:30px}
.empty-ic.warn{background:var(--warn-soft);color:var(--warn)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:12px 0 18px}
.page-head h1{font-size:27px;line-height:1.3;margin:0}
.page-sub{margin:4px 0 0;color:var(--sub);font-size:13.5px}

/* ── 下から出るシート（パソコンは中央の小窓） ── */
.sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.sheet-back{position:absolute;inset:0;background:rgba(8,10,14,.48);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:fade .2s ease}
.sheet-panel{position:relative;width:100%;max-width:560px;max-height:90vh;overflow:auto;background:var(--surface);border-radius:28px 28px 0 0;padding:8px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:var(--shadow-float);animation:up .32s cubic-bezier(.16,1,.3,1);outline:none}
.sheet-grip{width:42px;height:5px;border-radius:3px;background:var(--line-2);margin:4px auto 12px}
.sheet-title{font-size:17px;line-height:1.5;margin:2px 6px 14px;text-align:center}
.sheet-text{font-size:15px;line-height:1.75;margin:0 4px 18px}
.sheet-text.sub{color:var(--sub);font-size:13.5px}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
body.sheet-open{overflow:hidden}
@media (min-width:720px){
  .sheet{align-items:center;padding:24px}
  .sheet-panel{border-radius:26px;padding:24px 24px 20px;animation:pop-in .26s cubic-bezier(.16,1,.3,1)}
  .sheet.small .sheet-panel{max-width:420px}
  .sheet-grip{display:none}
}
@keyframes up{from{transform:translateY(40px);opacity:.2}to{transform:none;opacity:1}}
@keyframes pop-in{from{transform:scale(.96);opacity:0}}
@keyframes fade{from{opacity:0}}
.choices{display:flex;flex-direction:column;gap:8px;margin:0 0 10px}
.choice{display:flex;align-items:center;gap:14px;padding:14px;border-radius:18px;background:var(--surface-2);color:var(--ink);transition:background .12s,transform .08s}
.choice:hover{background:var(--accent-soft)}
.choice:active{transform:scale(.99)}
.choice-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.choice-tx b{font-size:15.5px}
.choice-tx small{font-size:12.5px;color:var(--sub)}
.choice-go{width:18px;height:18px;color:var(--faint)}

/* ── 一言のお知らせ（「元に戻す」つき） ── */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 28px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:200;display:flex;align-items:center;gap:14px;max-width:calc(100% - 32px);padding:12px 12px 12px 18px;border-radius:16px;background:var(--ink);color:var(--bg);font-size:14px;font-weight:700;box-shadow:var(--shadow-float);animation:up .3s cubic-bezier(.16,1,.3,1)}
.toast-act{border:0;background:color-mix(in srgb,var(--bg) 16%,transparent);color:var(--bg);font-weight:800;font-size:13px;padding:6px 12px;border-radius:10px;cursor:pointer}
.m-focus .toast{bottom:calc(104px + env(safe-area-inset-bottom))}
.m-auth .toast{bottom:24px}
@media (min-width:960px){.m-app .toast{bottom:28px}}

/* ── 書く画面 ── */
.focus-bar{padding:0 8px;gap:4px}
.m-focus .topbar{display:flex}
.bar-title{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;font-size:15px}
.bar-title b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--tc,var(--accent)) 14%,transparent);color:var(--tc,var(--accent));flex:none}
.bar-ic .ic{width:16px;height:16px}
.compose-layout{max-width:720px;margin:0 auto}
.compose{padding:6px 16px 0}
@media (min-width:1100px){
  .stage{aspect-ratio:16/9;max-height:420px}
  .compose-layout{max-width:1280px;display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:40px;padding:0 36px;align-items:start}
  .compose{padding:20px 0 0}
  .preview{display:flex!important;position:sticky;top:calc(var(--bar-h) + 20px);height:calc(100vh - var(--bar-h) - 40px)}
  .hide-wide{display:none!important}
}

.photos{margin:4px 0 18px}
.photos-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 2px 10px}
.photos-head h2{font-size:15px;margin:0;display:flex;align-items:center}
.photos-head small{font-weight:500;color:var(--faint);font-size:12.5px;margin-left:8px}
.photos-count{font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.drop{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:28px 18px 22px;border:2px dashed var(--line-2);border-radius:var(--r-xl);background:var(--surface);transition:border-color .15s,background .15s}
.photos.none .drop{display:flex}
.photos.drop-on .drop,.photos.drop-on .stage{border-color:var(--accent);background:var(--accent-soft)}
.drop-ic{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:8px}
.drop-ic .ic{width:30px;height:30px}
.drop b{font-size:16px}
.drop small{font-size:12.5px;color:var(--sub)}
.drop-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 4px}
.drop-btns label{position:relative;overflow:hidden}
.drop-btns input,.add-mini input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.drop-pc{display:none}
@media (hover:hover) and (pointer:fine){.cam-only{display:none!important}.drop-pc{display:block;margin-top:4px}}
.stage{display:none;position:relative;margin:0 0 10px;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;max-height:52vh;width:100%;background:var(--surface-2);border:2px solid transparent;box-shadow:var(--shadow-1)}
.photos:not(.none) .stage{display:block}
.stage img{width:100%;height:100%;object-fit:cover;display:block}
.stage .badge{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.58);color:#fff;font-size:12px;font-weight:800;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.stage .badge .ic{width:13px;height:13px}
.stage-btn{position:absolute;inset:0;border:0;background:none;cursor:pointer}
.strip{list-style:none;margin:0;padding:2px 2px 4px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.photos.none .strip{display:none}
.photo,.photo-add{position:relative;flex:none;width:72px;height:72px;border-radius:16px;overflow:hidden}
.photo{background:var(--surface-2)}
.photo img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.photo:first-child{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.photo:first-child{margin:2px 2px 2px 4px}
.photo-btn{position:absolute;inset:0;border:0;background:none;padding:0;cursor:pointer;border-radius:16px}
.photo-btn:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.photo.busy{background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface) 50%,var(--surface-2) 70%);background-size:300% 100%;animation:shimmer 1.2s linear infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:0 0}}
.photo.dragging{opacity:.35}
.photo.drop-before{box-shadow:-4px 0 0 var(--accent)}
.add-mini{position:absolute;inset:0;display:grid;place-items:center;border:2px dashed var(--line-2);border-radius:16px;background:var(--surface);color:var(--sub);cursor:pointer;transition:border-color .15s,color .15s}
.add-mini:hover{border-color:var(--accent);color:var(--accent)}
.add-mini .ic{width:24px;height:24px}
.hint{font-size:12.5px;color:var(--faint);margin:8px 2px 0;line-height:1.65}
.photos.none .hint{display:none}

.writer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:18px 18px 14px;margin:0 0 14px;box-shadow:var(--shadow-1);transition:border-color .15s,box-shadow .15s}
.writer:focus-within{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));box-shadow:0 0 0 4px var(--accent-ring)}
.title-input{display:block;width:100%;border:0;outline:none;background:transparent;resize:none;font-size:22px;font-weight:800;line-height:1.45;padding:0;overflow:hidden;min-height:32px;font-feature-settings:"palt" 1}
.title-input::placeholder,.body-input::placeholder{color:var(--faint);font-weight:500}
.title-meta{display:flex;align-items:center;gap:8px;min-height:18px;margin:6px 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.title-meta .field-err{margin:0}
.counter{font-size:12px;color:var(--faint);margin-left:auto;font-variant-numeric:tabular-nums}
.counter.over{color:var(--warn);font-weight:800}
.body-input{display:block;width:100%;border:0;outline:none;background:transparent;resize:none;font-size:16px;line-height:1.9;padding:0;min-height:150px;overflow:hidden}
.hint-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;padding-top:12px;border-top:1px dashed var(--line)}
.hint-chips>span{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--faint);margin-right:2px}
.hint-chips .ic{width:14px;height:14px}
.hint-chip{height:32px;padding:0 13px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:13px;font-weight:700;color:var(--sub);cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.hint-chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1)}
.details{margin:0 0 14px}
.details summary{list-style:none;display:flex;align-items:center;gap:10px;padding:15px 18px;cursor:pointer}
.details summary::-webkit-details-marker{display:none}
.details summary>span{flex:1;display:flex;flex-direction:column;line-height:1.45;min-width:0}
.details summary b{font-size:15px}
.details summary small{font-size:12.5px;color:var(--sub)}
.details-go{width:18px;height:18px;color:var(--faint);transition:transform .2s}
.details[open] .details-go{transform:rotate(180deg)}
.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 18px 18px}
@media (max-width:400px){.details-grid{grid-template-columns:1fr}}
.setting{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;margin:0 0 14px;cursor:pointer}
.setting>.ic{color:var(--sub)}
.setting-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.setting-tx b{font-size:15px}
.setting-tx small{font-size:12px;color:var(--sub)}
.input.date{width:auto;min-height:42px;padding:6px 10px}

/* 浮いたボタン */
.actionbar{position:sticky;bottom:0;z-index:15;margin:26px -8px 0;padding:10px 0 calc(12px + env(safe-area-inset-bottom))}
.actionbar-in{display:flex;align-items:center;gap:8px;padding:8px;border-radius:24px;background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);border:1px solid var(--line);box-shadow:var(--shadow-float)}
.actionbar .btn{min-height:48px;border-radius:17px}
.actionbar .btn.round{width:48px;border-radius:50%}
.actionbar .grow{flex:1}
@media (max-width:480px){.actionbar .lbl{display:none}.actionbar .btn{padding:0 15px}.setting-tx small{display:none}}
@media (min-width:1100px){.actionbar{margin:26px 0 0}.actionbar-in{width:max-content;margin-left:auto}.actionbar .grow{flex:0 0 220px}}

/* 確かめ・送信中 */
.warn-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.warn-list li{display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:var(--warn-soft);color:var(--warn);font-size:14px;line-height:1.65}
.warn-list .ic{flex:none;margin-top:2px;width:18px;height:18px}
.progress-box{text-align:center;padding:16px 4px 4px}
.progress-box p{margin:0}
#progress-text{font-weight:800;margin-top:12px}
.ring{position:relative;width:76px;height:76px;margin:0 auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:var(--surface-2);stroke-width:4}
.ring .ring-fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset .25s}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
.sheet-photo-img img{display:block;width:100%;max-height:40vh;object-fit:contain;border-radius:18px;background:var(--surface-2);margin:6px 0 10px}

/* ── サイトでの見え方（いつも明るい紙の色で） ── */
.preview{display:none;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-1)}
.preview.open{display:flex;position:fixed;inset:0;z-index:90;border-radius:0;border:0;animation:up .3s cubic-bezier(.16,1,.3,1)}
.preview-head{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.preview-head b{display:flex;align-items:center;gap:6px;font-size:13.5px;flex:1}
.preview-head b .ic{width:17px;height:17px;color:var(--sub)}
.seg{display:inline-flex;background:var(--surface-2);border-radius:11px;padding:3px}
.seg-btn{border:0;background:none;padding:5px 13px;border-radius:9px;font-size:13px;font-weight:700;color:var(--sub);cursor:pointer}
.seg-btn.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.preview-body{flex:1;overflow:auto;background:var(--surface-2);padding:18px}
.pv-device{max-width:400px;margin:0 auto;border-radius:24px;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 12px 32px rgba(0,0,0,.12)}
.preview.open .preview-body{padding:0}
.preview.open .pv-device{max-width:none;border-radius:0;box-shadow:none}
.pv-page{padding:22px 20px 40px;color:#26292e;background:#fbfaf7;min-height:100%;font-family:"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif}
.pv-en{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#8c8a85;margin:0}
.pv-h{font-size:20px;font-weight:700;line-height:1.55;margin:6px 0;letter-spacing:.04em}
.pv-date{font-size:12px;color:#8c8a85;border-bottom:1px solid #26292e;padding-bottom:12px;margin:0 0 16px}
.pv-hero{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:0 0 14px;background:#e6e3dc}
.pv-spec{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e3e0d8;margin:0 0 14px}
.pv-spec div{border-bottom:1px solid #e3e0d8;padding:7px 4px}
.pv-spec dt{font-size:10.5px;color:#8c8a85;margin:0}
.pv-spec dd{margin:0;font-size:13px;font-weight:700}
.pv-body p{font-size:13.5px;line-height:2;margin:0 0 1.1em;letter-spacing:.02em}
.pv-gal{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px}
.pv-gal img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.pv-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;margin-top:10px}
.pv-card img,.pv-card .pv-noimg{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:#e6e3dc}
.pv-card small{display:block;font-size:10.5px;color:#8c8a85;margin-top:8px}
.pv-card b{display:block;font-size:12.5px;line-height:1.6;margin-top:2px}
.pv-card.ghost{opacity:.35}
.pv-empty{color:#9a978f;font-size:13px;text-align:center;padding:48px 10px;line-height:1.8}

/* ── 公開しました ── */
.done{max-width:480px;margin:0 auto;padding:28px 16px 48px;text-align:center}
.done-mark{position:relative;width:84px;height:84px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;margin:18px auto 22px;animation:pop .55s cubic-bezier(.2,1.5,.4,1)}
.done-mark>.ic{width:42px;height:42px;stroke-width:2.6;position:relative;z-index:1}
.done-mark i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--ok);animation:ripple 1.6s cubic-bezier(.2,.8,.2,1) .2s infinite;opacity:0}
.done-mark i+i{animation-delay:.7s}
@keyframes pop{from{transform:scale(.3);opacity:0}}
@keyframes ripple{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.9);opacity:0}}
.done h1{font-size:26px;margin:0 0 6px}
.done-lead{color:var(--sub);margin:0 0 22px;font-size:14.5px}
.done-card{display:flex;gap:12px;align-items:center;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;margin:0 0 22px;box-shadow:var(--shadow-1)}
.done-card img,.done-card .thumb{width:76px;height:76px;border-radius:14px;object-fit:cover;flex:none}
.done-card div{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.done-card b{font-size:15px;line-height:1.45}
.done-card small{color:var(--sub);font-size:12.5px}
.done-actions{display:flex;flex-direction:column;gap:10px}

/* ── 届いたメール（デモ） ── */
.mail{margin:0 0 10px}
.mail summary{list-style:none;display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer}
.mail summary::-webkit-details-marker{display:none}
.mail-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.mail-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.mail-tx b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-tx small{font-size:12px;color:var(--sub)}
.mail pre{white-space:pre-wrap;word-break:break-all;font:inherit;font-size:13.5px;line-height:1.75;margin:0;padding:0 16px 16px 64px;color:var(--sub)}
.mail[open] .details-go{transform:rotate(180deg)}

/* ── 分類・予約・固定・ごみ箱（2026-10-20） ── */
.btn.sm{min-height:38px;padding:0 14px;font-size:13.5px;border-radius:12px}
.btn.sm .ic{width:16px;height:16px}
.link.sm{font-size:13px;padding:2px}
.chip .ic{width:15px;height:15px}
.chip.sm{height:32px;padding:0 12px;font-size:13px}
.chip.ghost{border-style:dashed;background:transparent;color:var(--faint)}
.filters.sub{margin-top:-4px}
.page-note{font-size:13.5px;line-height:1.75;color:var(--sub);margin:0 0 14px}
.status.sched{color:var(--accent)}
.status.sched::before{background:var(--accent)}
.status.end{color:var(--faint)}
.status.end::before{background:transparent;border:1.5px solid var(--faint)}
.cat-chip{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:700;color:var(--sub);padding:1px 8px;border-radius:999px;border:1px solid var(--line-2)}
.cat-chip .ic{width:12px;height:12px}
.pin-mark{display:inline-grid;place-items:center;vertical-align:-3px;margin-right:4px;color:var(--accent)}
.pin-mark .ic{width:16px;height:16px}
.posts.is-grid .post.is-scheduled::after{content:"予約";position:absolute;right:6px;bottom:6px;padding:1px 8px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:800}
.posts.is-grid .post.is-ended::after{content:"終了";position:absolute;right:6px;bottom:6px;padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;font-weight:800}
.posts.is-grid .post.is-ended img,.post.is-ended .thumb img{opacity:.55}
.post.is-trash{cursor:default}
.post.is-trash .thumb{opacity:.6}
.post.is-trash form{margin:0 0 0 auto;flex:none}

/* 書く画面：分類 */
.cats-card{padding:14px 16px 16px;margin:0 0 14px}
.cats-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.cats-head b{display:inline-flex;align-items:center;gap:6px;font-size:15px}
.cats-head b .ic{width:17px;height:17px;color:var(--sub)}
.cat-opts{display:flex;flex-wrap:wrap;gap:8px}
.cat-opt{position:relative;cursor:pointer}
.cat-opt input{position:absolute;opacity:0;pointer-events:none}
.cat-opt span{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:14px;font-weight:700;color:var(--sub);transition:background .12s,color .12s,border-color .12s}
.cat-opt:hover span{border-color:var(--accent);color:var(--ink)}
.cat-opt input:checked+span{background:var(--accent);border-color:var(--accent);color:#fff}
.cat-opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}

/* 書く画面：公開の設定 */
.pubset{margin:0 0 14px;padding:4px 0}
.pub-row{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 18px;cursor:pointer}
.pub-row+.pub-row{border-top:1px solid var(--line)}
.pub-row>.ic{color:var(--sub)}
.pub-row em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--faint);margin-left:6px;white-space:nowrap}
.switch{-webkit-appearance:none;appearance:none;position:relative;width:50px;height:30px;border-radius:999px;background:var(--line-2);flex:none;cursor:pointer;transition:background .18s;margin:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.switch:checked{background:var(--accent)}
.switch:checked::after{transform:translateX(20px)}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pub-more{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 18px;border-top:1px solid var(--line);font-size:13px;font-weight:700;color:var(--accent)}
.pub-more span{flex:1}
.pub-more .ic{width:17px;height:17px}

/* 写真の説明 */
.cap-edit{margin:0 0 12px}
.cap-edit .field-label small{font-weight:500;color:var(--faint);margin-left:4px}
.cap-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.photo{position:relative}
.photo-cap{position:absolute;left:4px;right:4px;bottom:4px;padding:1px 6px;border-radius:7px;background:rgba(0,0,0,.62);color:#fff;font-size:10.5px;font-weight:700;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}

/* 前の内容（履歴） */
.narrow-page{max-width:680px;margin:0 auto;padding:14px 16px 56px}
.revs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rev{padding:14px 16px}
.rev-head{display:flex;align-items:baseline;gap:10px;margin:0 0 4px}
.rev-head b{font-size:14px}
.rev-head small{font-size:12px;color:var(--faint)}
.rev-title{font-weight:700;margin:0 0 4px;line-height:1.5}
.rev-body{font-size:13px;color:var(--sub);margin:0 0 10px;line-height:1.7}

/* 設定（分類） */
.cats-form{padding:16px 16px 14px;margin:0 0 16px;scroll-margin-top:80px}
.cats-form-head{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.cats-form-head h2{font-size:17px;margin:0}
.cats-form-sub{font-size:12px;color:var(--sub);margin-left:auto}
.cat-rows{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.cat-row{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cat-grip{color:var(--faint);display:grid;place-items:center}
.cat-grip .ic{width:17px;height:17px}
.cat-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.cat-main .input{min-height:42px;padding:8px 12px}
.cat-main small{font-size:11.5px;color:var(--faint);padding-left:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-acts{display:flex;align-items:center}
.cat-acts .icon-btn{width:36px;height:36px}
.cat-acts .icon-btn .ic{width:18px;height:18px}
.icon-btn.danger{color:var(--danger)}
.cat-rows li:first-child [data-cat-move="-1"],.cat-rows li:last-child [data-cat-move="1"]{visibility:hidden}
.cat-add{display:flex;gap:8px;margin:0 0 12px}
.cat-add .input{flex:1;min-height:44px}
.cats-form-foot{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding-top:12px}

/* 見られた回数 */
.stats.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:560px){.stats.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat span em{font-style:normal;font-weight:500;color:var(--faint);margin-left:4px}
.views{display:inline-flex;align-items:center;gap:3px;font-size:12px;color:var(--sub);font-variant-numeric:tabular-nums}
.views .ic{width:14px;height:14px}
.rank{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:14px 16px 8px;margin:0 0 18px}
.rank h2{display:flex;align-items:center;gap:6px;font-size:15px;margin:0 0 6px}
.rank h2 .ic{width:17px;height:17px;color:var(--accent)}
.rank h2 small{font-size:12px;font-weight:500;color:var(--faint);margin-left:2px}
.rank ol{list-style:none;margin:0;padding:0;counter-reset:r}
.rank li{counter-increment:r;border-top:1px solid var(--line)}
.rank li:first-child{border-top:0}
.rank a{display:flex;align-items:center;gap:10px;padding:10px 0;color:var(--ink)}
.rank a::before{content:counter(r);flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-size:12.5px;font-weight:800}
.rank-t{flex:1;min-width:0;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank b{font-size:15px;font-weight:800}
.rank b small{font-size:11.5px;color:var(--faint);margin-left:2px}
.rank-row{display:flex;align-items:center;gap:10px;padding:10px 0}
.rank-row::before{content:counter(r);flex:none;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);color:var(--sub);font-size:12.5px;font-weight:800}
.stat-sub{font-style:normal;font-size:11.5px;font-weight:700;color:var(--ok);margin-top:2px}

/* お問い合わせ */
a.stat.link{color:var(--ink);transition:border-color .15s,box-shadow .15s}
a.stat.link:hover{border-color:var(--accent);box-shadow:0 2px 10px var(--accent-ring)}
.stat-sub.muted{color:var(--faint);font-weight:500}
.nudge.urgent{border-color:color-mix(in srgb,var(--warn) 40%,var(--line));background:color-mix(in srgb,var(--warn-soft) 70%,var(--surface))}
.nav-item em.hot{background:var(--danger);color:#fff;border-radius:999px;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;font-size:11px;font-weight:800}
.inq-stats{margin-bottom:8px}
.inqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.inq{padding:14px 16px}
.inq.is-done{opacity:.72}
.inq-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--sub);margin:0 0 6px}
.inq-name{font-size:16px;font-weight:800;margin:0 0 8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.inq-name small{font-size:12.5px;font-weight:500;color:var(--sub)}
.inq-acts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.inq-acts .btn span{max-width:220px;overflow:hidden;text-overflow:ellipsis}
.inq-msg{font-size:14px;line-height:1.85;margin:0 0 10px;padding:10px 12px;border-radius:12px;background:var(--surface-2);white-space:normal;word-break:break-word}
.inq-extra{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:6px;margin:0 0 10px}
.inq-extra div{padding:6px 10px;border:1px solid var(--line);border-radius:10px}
.inq-extra dt{font-size:11px;color:var(--faint)}.inq-extra dd{margin:0;font-size:13px;font-weight:700}
.inq-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid var(--line);padding-top:10px;margin:0}
.inq-foot small{font-size:12px;color:var(--faint);margin-right:auto}

/* 本文のブロック（文章と写真） */
.blocks{display:flex;flex-direction:column;gap:10px}
.blk-ta{display:block;width:100%;border:0;outline:none;background:transparent;resize:none;font-size:16px;line-height:1.9;padding:0;min-height:56px;overflow:hidden}
.blk-ta::placeholder{color:var(--faint);font-weight:500}
.blk-text:only-child .blk-ta{min-height:120px}
.photo.in-body::after{content:"本文";position:absolute;right:4px;top:4px;padding:0 6px;border-radius:6px;background:var(--accent);color:#fff;font-size:10px;font-weight:800;line-height:1.7;pointer-events:none}
.blk-photo{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface-2)}
.blk-photo img{width:84px;height:64px;object-fit:cover;border-radius:10px;flex:none;background:var(--line)}
.blk-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.45}
.blk-meta b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blk-meta small{font-size:11.5px;color:var(--faint)}
.blk-acts{display:flex;gap:4px;flex:none}
.blk-btn{min-width:36px;height:36px;padding:0 10px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-size:14px;font-weight:800;cursor:pointer}
.blk-btn:hover{border-color:var(--accent);color:var(--accent)}
.blk-btn.out{font-size:12.5px;color:var(--sub)}
@media (max-width:420px){.blk-photo img{width:64px;height:52px}.blk-meta small{display:none}}
.hint-chip.photo-in{color:var(--t-diary);border-color:color-mix(in srgb,var(--t-diary) 50%,var(--line-2))}
.pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.pick-item{position:relative;padding:0;border:2px solid transparent;border-radius:12px;overflow:hidden;background:var(--surface-2);cursor:pointer;aspect-ratio:1}
.pick-item img{width:100%;height:100%;object-fit:cover;display:block}
.pick-item span{position:absolute;left:4px;right:4px;bottom:4px;padding:1px 6px;border-radius:7px;background:rgba(0,0,0,.62);color:#fff;font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pick-item:hover,.pick-item:focus-visible{border-color:var(--accent)}
.pv-inline{margin:0 0 1.1em}

/* 見出し */
.hint-chip.own{display:inline-flex;align-items:center;gap:4px;border-style:dashed;color:var(--accent)}
.hint-chip.own .ic{width:14px;height:14px}
.body-hint{font-size:12px;color:var(--faint);margin:8px 0 0}

/* AI で下書き */
.ai-btn{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:12px 14px;border-radius:16px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,#8b5cf6 12%,var(--surface)));color:var(--ink);text-align:left;cursor:pointer;transition:transform .08s,box-shadow .15s}
.ai-btn:hover{box-shadow:0 4px 14px var(--accent-ring)}
.ai-btn:active{transform:scale(.99)}
.ai-btn>.ic{width:22px;height:22px;color:var(--accent);flex:none}
.ai-btn span{display:flex;flex-direction:column;line-height:1.45}
.ai-btn b{font-size:14.5px}
.ai-btn small{font-size:12px;color:var(--sub)}
.ai-wait{text-align:center;padding:22px 8px 12px;color:var(--sub);font-size:14px}
.ai-wait small{color:var(--faint)}
.ai-dots{display:flex;justify-content:center;gap:7px;margin:0 0 14px}
.ai-dots i{width:10px;height:10px;border-radius:50%;background:var(--accent);animation:aidot 1.2s infinite ease-in-out}
.ai-dots i:nth-child(2){animation-delay:.15s}.ai-dots i:nth-child(3){animation-delay:.3s}
@keyframes aidot{0%,80%,100%{transform:scale(.5);opacity:.4}40%{transform:scale(1);opacity:1}}
.ai-title{font-size:17px;font-weight:800;line-height:1.5;margin:0 0 10px}
.ai-body{max-height:42vh;overflow:auto;padding:12px 14px;border-radius:14px;background:var(--surface-2);font-size:14px;line-height:1.85;margin:0 0 10px}
.ai-body h2{font-size:14.5px;margin:12px 0 4px}.ai-body h2:first-child{margin-top:0}
.ai-body p{margin:0 0 10px}
.ai-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 10px}
.ai-fields div{padding:7px 10px;border:1px solid var(--line);border-radius:10px}
.ai-fields dt{font-size:11px;color:var(--faint)}.ai-fields dd{margin:0;font-size:13.5px;font-weight:700}

/* ぼかす */
.blur-ed{position:fixed;inset:0;z-index:80;background:#0b0c0f;color:#fff;display:flex;flex-direction:column}
.blur-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 12px 10px}
.blur-bar b{font-size:14.5px}
.blur-bar .btn.ghost{color:#cfd3da}
.blur-stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:8px}
.blur-stage canvas{max-width:100%;max-height:100%;touch-action:none;cursor:crosshair;border-radius:6px}
.blur-rect{position:absolute;border:2px solid #fff;background:rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(0,0,0,.4);pointer-events:none}
.blur-foot{display:flex;align-items:center;gap:12px;padding:10px 14px calc(14px + env(safe-area-inset-bottom))}
.blur-foot small{font-size:12px;color:#aab0ba;line-height:1.6}

/* 検索での見え方 */
.pv-serp{background:#fff;color:#202124;border-radius:12px;padding:14px;font-family:arial,"Hiragino Sans","Noto Sans JP",sans-serif}
.serp-site{display:flex;align-items:center;gap:8px;margin:0 0 6px}
.serp-ic{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#f1f3f4;font-size:12px;font-weight:700;flex:none}
.serp-site span{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.serp-site b{font-size:12.5px;font-weight:400}
.serp-site small{font-size:11.5px;color:#4d5156;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.serp-t{font-size:17px;line-height:1.35;color:#1a0dab;margin:0 0 4px}
.serp-d{font-size:12.5px;line-height:1.6;color:#4d5156;margin:0}
.pv-note{font-size:11.5px;color:#8c8a85;line-height:1.7;margin:12px 2px 0}

/* プレビュー：分類・予約・動画・写真の説明 */
.pv-cat,.pv-sched{display:inline-block;margin-left:8px;padding:0 7px;border:1px solid #d9d6cf;font-size:10.5px;letter-spacing:.04em}
.pv-sched{border-color:var(--accent);color:var(--accent)}
.pv-video{aspect-ratio:16/9;display:grid;place-items:center;background:#1d1f24;color:#fff;font-size:12px;margin:0 0 1.1em}
.pv-link{text-decoration:underline;word-break:break-all}
.pv-fig{margin:0}
.pv-fig figcaption{font-size:10.5px;color:#8c8a85;margin:4px 0 0}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}@view-transition{navigation:none}}

/* ── レポート ── */
.stats-more{margin:-4px 0 16px;text-align:right}
.stats-more a{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.stats-more .ic{width:16px;height:16px}
.report-head{align-items:center;flex-wrap:wrap}
.r-tools{display:flex;gap:8px}
.r-periods{margin-bottom:14px}
.r-sum{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--accent-soft),color-mix(in srgb,#8b5cf6 10%,var(--surface)));border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);margin:0 0 14px}
.r-sum>.ic{color:var(--accent);margin-top:3px;flex:none}
.r-sum p{margin:0;font-size:15px;line-height:1.85;font-weight:600}
.r-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
@media (max-width:760px){.r-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.r-card{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);min-width:0}
.r-card>span{font-size:12px;font-weight:700;color:var(--sub)}
.r-card b{font-size:26px;line-height:1.25;font-weight:800}
.r-card b small{font-size:13px;color:var(--faint);margin-left:3px}
.r-ch{font-style:normal;font-size:12.5px;font-weight:800;color:var(--faint)}
.r-ch.up{color:var(--ok)}.r-ch.down{color:var(--danger)}
.r-prev{font-size:11.5px;color:var(--faint)}
.r-note{font-size:11px;color:var(--sub);margin-top:2px}
.r-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);padding:14px 16px 12px;margin:0 0 14px;min-width:0}
.r-box h2{display:flex;align-items:center;gap:6px;font-size:15px;margin:0 0 10px;flex-wrap:wrap}
.r-box h2>.ic{width:17px;height:17px;color:var(--accent)}
.r-legend{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--sub)}
.r-legend i{display:inline-block;width:16px;height:3px;border-radius:2px;margin-left:8px}
.lg-cur{background:var(--accent)}.lg-prev{background:repeating-linear-gradient(90deg,var(--faint) 0 4px,transparent 4px 7px)}
.r-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.r-two>.r-box{margin:0 0 14px}
@media (max-width:760px){.r-two{grid-template-columns:1fr;gap:0}}
.chart{width:100%;height:auto;display:block}
.chart .c-grid{stroke:var(--line);stroke-width:1}
.chart .c-axis{fill:var(--faint);font-size:11px;font-family:var(--font)}
@media (max-width:560px){.chart.wide .c-axis{font-size:21px}.chart.wide .c-cur{stroke-width:4}.chart.wide .c-dot{display:none}}
.chart .c-cur{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.chart .c-area{fill:color-mix(in srgb,var(--accent) 12%,transparent);stroke:none}
.chart .c-prev{fill:none;stroke:var(--faint);stroke-width:1.6;stroke-dasharray:4 4}
.chart .c-dot{fill:var(--surface);stroke:var(--accent);stroke-width:1.6}
.chart .c-bar{fill:color-mix(in srgb,var(--accent) 45%,var(--surface))}
.chart .c-bar.top{fill:var(--accent)}
.r-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.r-bars li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.r-l{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.r-bars b{font-size:13.5px}
.r-bar{grid-column:1/-1;display:block;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}
.r-bar>i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.r-bar .w0{width:0%}.r-bar .w1{width:5%}.r-bar .w2{width:10%}.r-bar .w3{width:15%}.r-bar .w4{width:20%}.r-bar .w5{width:25%}.r-bar .w6{width:30%}.r-bar .w7{width:35%}.r-bar .w8{width:40%}.r-bar .w9{width:45%}.r-bar .w10{width:50%}.r-bar .w11{width:55%}.r-bar .w12{width:60%}.r-bar .w13{width:65%}.r-bar .w14{width:70%}.r-bar .w15{width:75%}.r-bar .w16{width:80%}.r-bar .w17{width:85%}.r-bar .w18{width:90%}.r-bar .w19{width:95%}.r-bar .w20{width:100%}
.r-devices{display:flex;flex-direction:column;gap:12px}
.r-dev{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline}
.r-dev span{font-size:13.5px;font-weight:700}
.r-dev b{font-size:18px}
.r-dev b small{font-size:12px;color:var(--faint)}
.r-dev.d-desktop .r-bar>i{background:#8b5cf6}.r-dev.d-tablet .r-bar>i{background:var(--t-diary)}
.r-pub{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.r-pub li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.r-pub time{font-size:12px;color:var(--faint);min-width:5.5em}
.r-empty{font-size:13px;color:var(--faint);margin:6px 0}
.r-foot{margin-top:4px}
@media print{
  @page{size:A4;margin:12mm}
  html,body,.shell,.main,.content{background:#fff!important}
  .side,.topbar,.tabbar,.r-tools,.r-periods,.demo,.toast,.sheet{display:none!important}
  .shell,.main{display:block}
  .content{max-width:none;padding:0}
  .r-box,.r-card,.r-sum{box-shadow:none;break-inside:avoid}
  .r-two{grid-template-columns:1fr 1fr;gap:10px}
  .r-cards{grid-template-columns:repeat(4,1fr)}
  .report-head h1{font-size:22px}
}/* ログイン：メールの6桁の番号（ホーム画面のアイコンから） */
.code-form{margin:18px 0 6px}
.code-input{font-size:24px;letter-spacing:.3em;text-align:center;font-variant-numeric:tabular-nums}
/* 記事が多いとき：50件ずつ */
.search-note{font-size:12.5px;color:var(--sub);margin:-6px 0 12px}
.search-note a{color:var(--accent)}
.more-posts{margin:14px 0 0}
/* サイトでの見え方：写真は枠からはみ出さない。上の写真は大きな1枚＋小さな並び */
.pv-fig img{display:block;max-width:100%;height:auto}
.pv-inline img{width:100%}
.pv-viewer .pv-hero{aspect-ratio:4/3;object-fit:contain;margin:0}
.pv-thumbs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 16px}
.pv-t{width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;opacity:.55;border-radius:2px}
.pv-t img{width:100%;height:100%;object-fit:cover;display:block}
.pv-t.on{opacity:1;outline:2px solid #26292e;outline-offset:2px}
/* 本文の写真：「新しい写真を選ぶ」（本文だけ）と、上の写真から選ぶ */
.pick-new{flex-direction:column;gap:2px;height:auto;padding:12px 16px;margin:0 0 12px;text-align:center}
.pick-new small{display:block;font-size:11.5px;font-weight:500;opacity:.85}
.pick-new input{display:none}
.pick-or{margin:4px 0 8px}
.blk-img{padding:0;border:0;background:none;cursor:pointer;flex:none;border-radius:8px;overflow:hidden}
/* 分類：書く画面で新しく作る */
.cat-new{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:13px;color:var(--sub)}
.cat-new span{flex:none}
.cat-new .input{flex:1;min-width:0;height:40px;font-size:14px}
.cats-first summary{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;list-style:none}
.cats-first summary::-webkit-details-marker{display:none}
.cats-first summary>span{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cats-first summary small{flex-basis:100%;font-size:12px;color:var(--sub)}
.cats-first .ic{width:18px;height:18px}
/* デモ：Googleマップに送った中身（最新情報に近い形） */
.gbp-card{max-width:440px;padding:0;overflow:hidden;margin:0 0 14px}
.gbp-at{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sub);margin:0;padding:10px 14px}
.gbp-at .ic{width:15px;height:15px}
.gbp-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--line)}
.gbp-noimg{margin:0;padding:24px 14px;color:var(--sub);background:var(--surface-2);text-align:center;font-size:13px}
.gbp-text{margin:0;padding:12px 14px 4px;font-size:14px;line-height:1.75;white-space:normal}
.gbp-btn{display:inline-block;margin:6px 14px 14px;padding:7px 18px;border:1px solid var(--line-2);border-radius:999px;color:#1a73e8;font-weight:700;font-size:13px;text-decoration:none}
.gbp-del{display:flex;align-items:center;gap:10px;padding:12px 14px;color:var(--sub)}
.gbp-del span{display:flex;flex-direction:column}
.gbp-del small{font-size:12px}
/* 写真のシート：施工前と施工後の比べる表示の案内 */
.cap-ba{flex-basis:100%;margin:6px 0 0;font-size:12px;line-height:1.6;color:var(--sub)}
/* 公開前の確認用リンク */
.share-card{display:grid;gap:12px}.share-url{font-size:13px}.share-actions{display:flex;flex-wrap:wrap;gap:8px}
/* 文章を AI で整える */
.ai-btn.ai-polish{margin-top:8px}
.polish-notes{margin:0 0 12px;padding-left:1.2em;font-size:13px;line-height:1.7;color:var(--sub)}
/* 2026-10-23：札・文字を大きく・ホーム画面の案内・送れなかったとき・まちがえた公開をやめる・使える人 */
.status.draft{color:var(--warn)}
.status.draft::before{background:var(--warn)}
.status.map{color:var(--sub);font-weight:600}
.status.map::before{background:var(--ok)}
.status.warn{color:var(--danger)}
.status.warn::before{background:var(--danger)}
html.big{zoom:1.15}
.a2hs{display:flex;align-items:flex-start;gap:12px;padding:14px 12px 14px 16px;margin:0 0 14px}
.a2hs[hidden]{display:none}
.a2hs>.ic{flex:none;width:22px;height:22px;margin-top:2px;color:var(--accent)}
.a2hs>div{flex:1;min-width:0;font-size:14px;line-height:1.7}
.a2hs p{margin:4px 0 0;color:var(--ink)}
.a2hs small{display:block;margin-top:4px;font-size:12px;color:var(--sub)}
.a2hs .icon-btn{flex:none;margin:-6px -4px 0 0}
.bar-title{flex-wrap:wrap;row-gap:0}
.bar-co{flex-basis:100%;text-align:center;font-size:11px;line-height:1.2;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress-fail{text-align:center;padding:12px 4px 4px}
.progress-fail[hidden]{display:none}
.fail-h{font-weight:800;font-size:17px;margin:0 0 8px}
.progress-fail .sheet-text{text-align:left}
.undo-pub{margin:14px 0 0;text-align:center}
.btn.sm{min-height:40px;padding:8px 14px;font-size:13.5px;white-space:normal}
.users{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column}
.users li{display:flex;flex-direction:column;gap:2px;padding:10px 2px;border-bottom:1px solid var(--line)}
.users li:last-child{border-bottom:0}
.users small{font-size:12px;color:var(--sub);line-height:1.6;word-break:break-all}
.users-card{padding:16px 18px;margin:0 0 14px}
.once-row{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--sub);cursor:pointer}
.once-row input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent)}
/* 2026-10-23：Googleマップの口コミ・マップの数字 */
.sec-h{display:flex;align-items:center;gap:6px;font-size:15px;margin:0 0 10px}
.sec-h .ic{width:17px;height:17px;color:var(--accent)}
.revs{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:12px}
.rev{padding:14px 16px}
.rev-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:13px;color:var(--sub)}
.stars{color:#e6a700;font-size:16px;letter-spacing:1px;line-height:1}
.rev-head .status{margin-left:auto}
.rev-who{margin:8px 0 2px;font-weight:700;font-size:14px}
.rev-text{margin:0 0 12px;font-size:15px;line-height:1.8;white-space:normal;overflow-wrap:anywhere}
.rev-text.muted{color:var(--faint);font-size:13.5px}
.rev-form textarea{width:100%;min-height:96px;resize:vertical;font-size:16px;line-height:1.7}
.rev-acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:8px}
.rev-reply{margin:4px 0 0;padding:12px 14px;border-radius:var(--r);background:var(--surface-2)}
.rev-reply>b{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sub)}
.rev-reply>b .ic{width:15px;height:15px}
.rev-reply>p{margin:6px 0 4px;font-size:14.5px;line-height:1.8;overflow-wrap:anywhere}
.rev-reply>small{font-size:12px;color:var(--faint)}
.rev-reply details{margin-top:8px}
.rev-reply summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--accent);padding:6px 0}
.rev-reply details form{margin-top:8px}
.danger-tx{color:var(--danger)}
.rev-tips{padding:14px 16px;margin:0 0 14px}
.rev-tips ul{margin:0;padding-left:1.2em;font-size:13.5px;line-height:1.8;color:var(--sub)}
.stats.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.r-gbp .r-card{box-shadow:none;background:var(--surface-2);border-color:transparent}
.r-sub{font-size:13.5px;margin:14px 0 6px;color:var(--sub)}
.r-kw{margin:0 0 6px;padding:0;list-style:none;counter-reset:kw;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px}
@media (max-width:560px){.r-kw{grid-template-columns:1fr}}
.r-kw li{counter-increment:kw;display:flex;align-items:baseline;gap:8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:14px;min-width:0}
.r-kw li::before{content:counter(kw);flex:none;width:1.4em;color:var(--faint);font-size:12px;font-variant-numeric:tabular-nums}
.r-kw li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-kw li b{flex:none;font-size:13.5px}
/* ═══ 2026-10-23 UI の見直し（だれでも迷わない：同じメニュー・大きめの字・はっきりした次の一手） ═══ */
/* メニュー：どの画面でも同じ項目。急ぎ → 書いたもの → 見る・決める */
.nav-group{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-top:1px solid var(--line)}
.nav-group:first-child{border-top:0;padding-top:0}
.nav-h{margin:4px 10px 2px;font-size:12.5px;font-weight:700;color:var(--faint);letter-spacing:.04em}
.nav-item{font-size:15px}
.nav-item em{font-size:13px}
.side-nav{gap:0}
/* スマホのメニューのシートにも同じ並び */
.menu-nav{gap:0;margin-bottom:6px}
.menu-nav .nav-item{min-height:48px;padding:10px 12px;font-size:16px;color:var(--ink);border-radius:14px}
.menu-nav .nav-item .ic{width:22px;height:22px}
.menu-nav .nav-group{border-top:1px solid var(--line)}
.menu-nav .nav-group:first-child{border-top:0}
/* 下のバー：ホーム・お問い合わせ・＋・口コミ・メニュー */
.tabbar-in{grid-template-columns:repeat(2,minmax(0,1fr)) auto repeat(2,minmax(0,1fr));padding:0 6px;max-width:500px;gap:2px}
.tab{position:relative;font-size:12px;border:0;background:none;cursor:pointer;font-family:inherit;min-height:48px;justify-content:center;white-space:nowrap}
.tab-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-style:normal;font-size:11px;font-weight:800;line-height:19px;text-align:center}
.tab-dot{position:absolute;top:6px;left:calc(50% + 9px);width:9px;height:9px;border-radius:50%;background:var(--warn)}
.tab-add{margin:0 4px}
/* 字：補足の字も読める大きさと濃さに（50〜70代の方がスマホで読む）。日本語は文節で折り返す */
:root{--sub:#474e59;--faint:#5b636e}
@media (prefers-color-scheme:dark){:root{--sub:#b6bdc8;--faint:#a3acb9}}
body{word-break:auto-phrase;line-break:strict;overflow-wrap:anywhere}
.stat span{font-size:13.5px}
.stat-sub{font-size:12.5px;color:var(--sub);font-weight:600}
.stat-sub.warn{color:var(--warn);font-weight:800}
.post-meta{font-size:13.5px;gap:4px 12px}
.views{font-size:13.5px;color:var(--sub)}
.chip{font-size:14.5px}
.chip em{font-size:13px}
.menu-item small{font-size:13px}
.page-note{font-size:14.5px}
.sheet-text.sub{font-size:14px}
.status{font-size:13px}
/* ホーム：今やること → 書く → 数字 */
.hero-head{margin:10px 0 12px}
.hello{font-size:15px}
.todo{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}
.todo .nudge{margin:0}
.home-h{font-size:16px;margin:4px 0 10px}
.quick-item .choice-tx b{font-size:15px}
.stat b small{white-space:nowrap}
/* 並べ方：記号だけでなく字も */
.vt{width:auto;gap:4px;padding:0 10px;height:34px;display:inline-flex;align-items:center;font-size:13px;font-weight:700;font-family:inherit}
.vt[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}
/* 書く画面：閉じる・その他に字を。タイトルと本文に見出し。AI のボタンはふつうの枠 */
.bar-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;flex:none}
.bar-btn:hover{background:var(--surface-2)}
.bar-btn .ic{width:20px;height:20px}
.writer-label{display:flex;align-items:center;gap:8px;margin:2px 0 6px;font-size:13.5px;font-weight:800;color:var(--sub)}
.writer-label .req{font-style:normal}
.body-input+.blocks,.writer .body-input{margin-top:2px}
.title-meta+.writer-label{margin-top:14px}
.title-input::placeholder,.body-input::placeholder{color:color-mix(in srgb,var(--faint) 75%,transparent);font-weight:400}
.hint-chips>span{font-size:13px}
.ai-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
@media (max-width:420px){.ai-row{grid-template-columns:1fr}}
.ai-btn{margin-top:0;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:none}
.ai-btn.ai-polish{margin-top:0}
.ai-btn:hover{box-shadow:none;border-color:var(--accent)}
.ai-btn>.ic{color:var(--sub)}
.ai-btn small{font-size:12.5px}
/* 分類：新しい分類は「＋」から */
.cats-head b small{font-size:12.5px;font-weight:600;color:var(--faint);margin-left:4px}
.cat-new-wrap{margin-top:10px}
.cat-new-wrap>summary{list-style:none;display:inline-flex;cursor:pointer;height:36px}
.cat-new-wrap>summary::-webkit-details-marker{display:none}
.cat-new-wrap[open]>summary{display:none}
.cat-new-wrap .cat-new{margin-top:0}
/* 下のボタン：見え方にも字を。パソコンは画面の下いっぱいの帯に */
.actionbar .pv-btn{padding:0 14px;gap:6px}
@media (min-width:1100px){
  .actionbar{margin:26px 0 0;padding:12px 0 16px;background:var(--bg);border-top:1px solid var(--line)}
  .actionbar-in{width:auto;justify-content:flex-end;padding:0;border-radius:0;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0}
}
/* 見え方（スマホの全面）：下に「戻って直す／公開する」 */
.preview-foot{display:none}
.preview.open .preview-foot{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--surface)}
.preview.open .preview-foot .btn{min-height:48px}
/* 公開前の確かめ：直してください（赤）・できれば（灰） */
.warn-h{display:flex;align-items:center;gap:6px;margin:4px 2px 8px;font-size:14px;font-weight:800}
.warn-h.must{color:var(--danger)}
.warn-h.may{color:var(--sub);margin-top:14px}
.warn-list.must li{background:var(--danger-soft);color:var(--ink)}
.warn-list.must .ic{color:var(--danger)}
.warn-list.may li{background:var(--surface-2);color:var(--ink)}
.warn-list.may .ic{color:var(--sub)}
#warn-acts .btn{min-height:50px}
/* 設定：上へ・下へは字の入ったボタン。消すは離して右端。使えない向きは薄く */
.cat-acts{gap:6px}
.mv-btn{display:inline-flex;align-items:center;gap:3px;min-height:40px;padding:0 10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.mv-btn .ic{width:16px;height:16px}
.mv-btn:hover{border-color:var(--accent)}
.cat-rows li:first-child [data-cat-move="-1"],.cat-rows li:last-child [data-cat-move="1"]{visibility:visible;opacity:.35;pointer-events:none}
.cat-acts .del-btn{margin-left:8px;width:40px;height:40px}
@media (max-width:480px){.mv-btn span{display:none}.mv-btn{padding:0 8px}}
.cats-form-foot{align-items:center;gap:12px}
.dirty-note{display:inline-flex;align-items:center;gap:5px;margin:0 auto 0 0;font-size:13.5px;font-weight:700;color:var(--warn)}
.dirty-note[hidden]{display:none}
.dirty-note .ic{width:16px;height:16px}
.users li{flex-direction:row;align-items:flex-start;gap:10px}
.users li>.ic{flex:none;width:20px;height:20px;margin-top:2px;color:var(--sub)}
.users li>span{display:flex;flex-direction:column;gap:2px}
/* 公開しました：取り消しは一番下に、小さく */
.undo-pub{margin:18px 0 0}
/* お知らせ（青）：記号を左に置いたまま、文は折り返す */
.notice.info{flex-wrap:nowrap;align-items:flex-start}
.notice.info>span{flex:1;min-width:0}
.notice.info>.ic{margin-top:2px}
/* お問い合わせ：電話する・メールで返事を書く（何が起きるかを字で） */
.inq-head{font-size:13.5px}
.act-btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);text-decoration:none;max-width:100%}
.act-btn:hover{border-color:var(--accent)}
.act-btn>.ic{flex:none;width:20px;height:20px;color:var(--accent)}
.act-btn span{display:flex;flex-direction:column;min-width:0;line-height:1.35}
.act-btn b{font-size:15px}
.act-btn small{font-size:13px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inq-taps{padding:14px 16px;margin:14px 0}
.inq-taps p{margin:0 0 4px;font-size:15px}
/* 口コミ：返信はだれでも見られる・こつは上に（閉じられる） */
.rev-public{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:13.5px;color:var(--sub)}
.rev-public .ic{width:16px;height:16px}
.rev-acts .btn{min-height:46px}
.rev-acts .btn[disabled]{opacity:.45;cursor:not-allowed}
details.rev-tips{padding:0;margin:0 0 14px}
details.rev-tips>summary{display:flex;align-items:center;gap:8px;padding:14px 16px;cursor:pointer;list-style:none}
details.rev-tips>summary::-webkit-details-marker{display:none}
details.rev-tips>summary .ic{width:18px;height:18px;color:var(--accent);flex:none}
details.rev-tips>summary small{font-size:13px;color:var(--faint);margin-right:auto}
details.rev-tips>summary .details-go{color:var(--faint);transition:transform .2s}
details.rev-tips[open]>summary .details-go{transform:rotate(180deg)}
details.rev-tips ul{margin:0;padding:0 16px 14px 34px;font-size:14px;line-height:1.85;color:var(--sub)}
/* レポート：増減の札・公開した記事の並び・表で保存は下に */
.r-ch{font-size:13px}
.r-ch.flat{color:var(--sub);font-weight:700}
.r-pub{font-size:14.5px}
.r-pub li{display:grid;grid-template-columns:6.2em auto minmax(0,1fr);align-items:start;gap:4px 8px}
.r-pub time{font-size:13px}
.r-pub-t{min-width:0}
.r-wide{grid-column:1/-1}
.r-csv{text-align:right;margin:4px 0 0}
.r-sub .r-legend{margin-left:10px}
/* ログイン：手順は1行で */
.auth-step{margin:0 0 14px;font-size:15px;line-height:1.75;color:var(--ink)}
/* 入力例（placeholder）は、書いた字と見分けがつくよう薄く・細く */
.blk-ta::placeholder,.input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--faint) 70%,transparent);font-weight:400}
/* 口コミ：ボタンはスマホでは横いっぱいに2段 */
@media (max-width:520px){.rev-acts{display:grid;grid-template-columns:1fr}.rev-acts .btn{width:100%}}
/* 添付の PDF（書く画面） */
.files-card{padding:14px 16px;margin:0 0 14px}
.file-rows{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}
.file-rows:empty{display:none}
.file-row{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.file-row.new{border-style:dashed}
.file-ic{flex:none;font-size:11px;font-weight:800;letter-spacing:.05em;padding:4px 7px;border-radius:6px;background:#c7372f;color:#fff}
.file-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.file-main .input{height:40px;font-size:15px}
.file-main b{font-size:15px;overflow-wrap:anywhere}
.file-main small{font-size:13px;color:var(--sub)}
.file-add{position:relative;overflow:hidden;cursor:pointer}
.file-add input{position:absolute;inset:0;opacity:0;cursor:pointer}
.file-add[hidden]{display:none}
/* 運営の画面：気になること・全社の状況（手を貸すところから）・最近の動き・使える人 */
.nav-admin{border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:2px}
.adm-health{padding:14px 16px;margin:0 0 18px}
.adm-sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.adm-sec-head .sec-h{margin:0}
.adm-sec-head .sec-h small{font-size:12.5px;font-weight:600;color:var(--faint);margin-left:6px}
.adm-issues{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.adm-issues li{display:flex;gap:8px;padding:10px 12px;border-radius:12px;background:var(--warn-soft);color:var(--ink);font-size:14px;line-height:1.65}
.adm-issues .ic{flex:none;width:18px;height:18px;color:var(--warn);margin-top:2px}
.adm-ok{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:14.5px;color:var(--sub)}
.adm-ok .ic{width:18px;height:18px;color:var(--ok)}
.adm-rows{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:10px}
@media (min-width:1100px){.adm-rows{grid-template-columns:1fr 1fr}}
.adm-row{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.adm-row.need{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.adm-row.ended{opacity:.6}
.adm-row-head{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.adm-name{display:flex;flex-direction:column;flex:1;min-width:140px}
.adm-name b{font-size:16px}
.adm-name small{font-size:12.5px;color:var(--faint)}
.adm-flags{display:flex;flex-wrap:wrap;gap:6px}
.adm-chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:800;background:var(--surface-2);color:var(--sub)}
.adm-chip.warn{background:var(--warn-soft);color:var(--warn)}
.adm-chip.bad{background:var(--danger-soft);color:var(--danger)}
.adm-chip.ok{background:var(--ok-soft);color:var(--ok)}
.adm-chip.muted{background:var(--surface-2);color:var(--faint)}
.adm-err{margin:0;padding:8px 10px;border-radius:10px;background:var(--danger-soft);color:var(--danger);font-size:13.5px}
.adm-nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px 12px;margin:0}
.adm-nums div{display:flex;flex-direction:column}
.adm-nums dt{font-size:12.5px;color:var(--faint);font-weight:700}
.adm-nums dd{margin:0;font-size:14.5px;font-weight:700}
.adm-acts{display:flex;flex-wrap:wrap;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.adm-acts form{margin:0}
.adm-h-sub{font-size:13px;font-weight:600;color:var(--faint);margin-left:8px}
.adm-feed{list-style:none;margin:0 0 20px;padding:4px 16px}
.adm-feed li{display:grid;grid-template-columns:9.5em minmax(0,12em) minmax(0,1fr) auto;align-items:baseline;gap:4px 12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.adm-feed li:last-child{border-bottom:0}
.adm-feed time{font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.adm-feed b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-feed small{font-size:12.5px;color:var(--faint)}
@media (max-width:720px){.adm-feed li{grid-template-columns:1fr;gap:2px}.adm-feed small{justify-self:start}}
.adm-back{margin:0 0 10px}
.adm-back a{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px}
.adm-back .ic{width:16px;height:16px}
.adm-add{padding:16px;display:flex;flex-direction:column;gap:12px;margin:0 0 20px}
.adm-add .sec-h{margin:0}
.adm-add .btn{align-self:flex-start}
.adm-u{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.adm-u .adm-meta{display:flex;flex-wrap:wrap;gap:0 1em;word-break:normal}
.adm-u .adm-meta span{white-space:nowrap}
.adm-u .adm-meta .adm-mail{white-space:normal;overflow-wrap:anywhere}
.adm-n{display:inline-block;margin-left:8px;padding:0 7px;border-radius:999px;background:var(--surface-2);color:var(--sub);font-size:12px;font-style:normal;font-weight:800}
.adm-entry{margin-bottom:18px}
.adm-entry .avatar{background:var(--ink);color:var(--bg)}
.adm-entry .avatar .ic{width:18px;height:18px}
.topbar-menu{display:inline-flex;align-items:center;gap:6px;flex:none;height:40px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.topbar-menu:active{background:var(--surface-2)}
.topbar-menu .ic{width:20px;height:20px}
.users li form{margin:0 0 0 auto}