/* AZRION CENTER — portal-family dark, small refined proportions. */
:root{
  --bg:#07081a; --panel:#10122a; --panel2:#161838; --line:#2a2c52;
  --ink:#eef0ff; --sub:#9aa0c8; --accent:#39d5e8; --accent2:#e85fc9;
  --ok:#37d99a; --err:#ff7a7a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:880px;margin:0 auto;padding:0 16px}
header.site{border-bottom:1px solid var(--line);background:rgba(10,11,30,.9)}
header.site .bar{display:flex;align-items:center;justify-content:space-between;padding-top:10px;padding-bottom:10px}
.brand{color:var(--ink);font-weight:800;letter-spacing:.14em;font-size:15px}
.brand span{color:var(--accent)}
nav{display:flex;gap:14px;align-items:center;font-size:13px}
nav a{color:var(--ink)}
.who{display:inline-flex;gap:7px;align-items:center;color:var(--sub)}
.who svg{border-radius:8px}
.inline{display:inline}
.linkbtn{background:none;border:none;color:var(--ink);font:inherit;cursor:pointer;padding:0}
main{flex:1 0 auto}
footer.site{border-top:1px solid var(--line);color:var(--sub);font-size:12px;padding:18px 0 30px}
h1{font-size:21px;margin:0 0 12px;letter-spacing:.02em}
h2{font-size:15px;margin:20px 0 8px}
.hero{padding:18px 0 8px}
.hero h1{font-size:26px;line-height:1.45}
.lead{color:var(--sub);max-width:560px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.btn{display:inline-block;background:var(--accent);color:#04222a;font-weight:700;border:none;border-radius:999px;padding:10px 22px;font-size:14px;cursor:pointer}
.btn:hover{text-decoration:none;opacity:.92}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.line{background:#06c755;color:#fff}
.ordiv{display:flex;align-items:center;gap:10px;margin:14px 0 10px;color:var(--sub);font-size:12px}
.ordiv::before,.ordiv::after{content:"";flex:1;height:1px;background:var(--line)}
.btn.small{padding:8px 17px;font-size:13.5px}
.btn.wide{width:100%;text-align:center}
.ticks{color:var(--sub);padding-left:18px}
.small{font-size:12.5px;color:var(--sub)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;margin:0 0 18px}
.card.narrow{max-width:460px;margin:0 auto}
label{display:block;margin:0 0 12px;font-size:13px;color:var(--sub)}
label input[type=email],label input[type=password],label input[type=text],label input[type=date],label input[type=number]{
  display:block;width:100%;margin-top:4px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:10px 12px;font-size:15px}
label.check{display:flex;gap:8px;align-items:flex-start;color:var(--ink)}
label.check input{margin-top:5px}
.note{border-radius:10px;padding:10px 12px;font-size:13px}
.note.error{background:rgba(255,122,122,.12);color:var(--err)}
.note.ok{background:rgba(55,217,154,.12);color:var(--ok)}
.me{display:flex;gap:14px;align-items:center;margin:8px 0}
.me svg{border-radius:18px}
.hello{font-size:17px;font-weight:700;margin:0}
.glist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.gcard{display:flex;justify-content:space-between;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px}
.gname{font-weight:600}
.appmark{display:block;font-size:10.5px;font-weight:500;color:var(--sub,#8b90c0);letter-spacing:.04em;margin-top:3px}
.llist{list-style:none;margin:0;padding:0}
.lrow{display:flex;justify-content:space-between;align-items:center;padding:8px 2px;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:none}
.badge{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--sub)}
.badge.ok{color:var(--ok);border-color:rgba(55,217,154,.4)}
.subform{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.avprev{display:flex;justify-content:center;margin:10px 0 16px}
.avprev svg{border-radius:28px}
.agroup{border:none;border-top:1px solid var(--line);margin:0;padding:12px 0 4px}
.agroup legend{font-size:13px;color:var(--sub);padding-top:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip input{position:absolute;opacity:0}
.chip span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:13px;cursor:pointer}
.chip input:checked+span{background:var(--accent);color:#04222a;border-color:var(--accent);font-weight:700}
.block{margin-top:26px}
@media (max-width:560px){.hero h1{font-size:22px}.card{padding:16px}}

/* Official icon in the header brand (2026-10-29) */
.brand{display:inline-flex;align-items:center;gap:9px}
.brand-icon{width:26px;height:26px;border-radius:7px;display:block}

/* ===== 第2弾（2026-10-29）: ヘッダー1行化・画面整理・反応の速さ ===== */
header.site .bar{flex-wrap:nowrap;gap:10px}
.brand{flex:none;white-space:nowrap}
nav{min-width:0;flex:1 1 auto;justify-content:flex-end}
.who-chip{display:inline-flex;align-items:center;gap:7px;min-width:0;flex:0 1 auto;color:var(--ink)}
.who-chip:hover{text-decoration:none}
.who-av{flex:none;display:inline-flex;border-radius:9px;overflow:hidden;line-height:0}
.who-av svg{border-radius:9px}
.who-av .faceimg{border-radius:9px}
.who-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:132px;font-size:13px;font-weight:600}
.logoutbtn{font-size:12.5px;color:var(--sub);flex:none;white-space:nowrap}
.logoutbtn:hover{color:var(--ink)}
nav form.inline{flex:none}
.faceimg{border-radius:22%;object-fit:cover;background:var(--panel2)}
.me .faceimg{flex:none}
@media (max-width:560px){.who-name{max-width:86px}.brand{font-size:13.5px;letter-spacing:.1em}}

/* 反応のキビキビ感：タップ遅延を消し、押下フィードバックを小さく速く */
a,button,label.chip span{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.btn{transition:transform .07s ease,opacity .15s ease}
.btn:active{transform:scale(.97)}
.chip span{transition:transform .07s ease,background .15s ease,color .15s ease}
.chip:active span{transform:scale(.95)}
.gcard .btn:active{transform:scale(.95)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* マイページ：プロフィール写真と接続の二層表示 */
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 2px}
.photopanel{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.photoctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px}
.filebtn{cursor:pointer;margin:0}
.connline{display:flex;gap:10px;align-items:flex-start;margin:0 0 6px}
.connline .badge{flex:none;margin-top:2px}
.lrow .lname{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badges{display:flex;gap:6px;flex:none;align-items:center}
.badge.auto{color:var(--accent);border-color:rgba(57,213,232,.45)}
.badge.dim{color:var(--sub);opacity:.75}

/* ===== 第3弾（2026-10-29）: Meta式コンソール文法＋文字・列・配分の統一 =====
   リズム: 行の高さ52px / グループラベル12px・700・sub色 / 区切りは1px hairline /
   見出し階層 h1=20px・subhead=13px・本文14px・補足12.5px に全画面で固定。 */
h1{font-size:20px}
.grouplabel{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.08em;margin:24px 2px 8px}
.card.rows{padding:0;overflow:hidden}
.srow{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 16px;border-bottom:1px solid var(--line);color:var(--ink)}
.srow:last-child{border-bottom:none}
li.srow{list-style:none}
a.srow{transition:background .12s ease}
a.srow:hover{text-decoration:none;background:rgba(255,255,255,.035)}
a.srow:active{background:rgba(255,255,255,.06)}
.srow .slabel{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .sval{color:var(--sub);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:48%}
.srow .chev{color:var(--sub);font-size:18px;line-height:1;flex:none}
.me.summary{color:var(--ink);margin:2px 0 0}
.me.summary:hover{text-decoration:none}
.me.summary .meinfo{flex:1;min-width:0;display:flex;flex-direction:column}
.me.summary .meinfo .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me.summary .chev{color:var(--sub);font-size:20px;line-height:1;flex:none}
.connhead{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--line)}
.connhead .badge{flex:none;margin-top:2px}
.card.rows .llist .srow{padding:8px 16px}
.backlink{margin:0 0 12px;font-size:13px}
.backlink a{color:var(--sub)}
.subhead{font-size:13px;font-weight:700;color:var(--ink);margin:18px 0 6px}
.subform .subhead{margin-top:2px}
/* 配分の統一：カード角丸・行カード・フォーム間隔 */
.gcard{border-radius:16px;padding:12px 14px}
label{margin:0 0 14px}
.subform{margin-top:16px;padding-top:16px}
.agroup{padding:14px 0 6px;margin:0}
.agroup legend{font-size:12px;font-weight:700;letter-spacing:.06em;padding-top:14px}
.note{margin:0 0 12px}
.terms h2{margin:22px 0 6px}

/* アバター編集：プレビュー追従＋色ドット */
.avstage{position:sticky;top:8px;z-index:3;background:var(--panel);padding:4px 0 8px;margin:0 0 4px}
.avstage .avprev{margin:4px 0 6px}
.avtools{text-align:center;margin:0}
.chipdot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:-1px;border:1px solid rgba(255,255,255,.28)}

/* 通知設定（初回オンボーディング共通パターン） */
.azpush{margin:14px 0 6px}
.azpush-state{font-size:14px;font-weight:700;margin:0 0 4px}
.azpush-btns{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}

/* ===== ウェブアプリ（standalone）前提の磨き：セーフエリア =====
   ステータスバーを透過（black-translucent）にしたため、ヘッダーは
   上端インセット分だけ下げる。フッター下端と左右（横向きのノッチ）
   も同様。通常のブラウザタブでは各 env() は 0 なので見た目は変わらない。 */
header.site .bar{padding-top:calc(10px + env(safe-area-inset-top))}
footer.site{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
.wrap{padding-left:max(16px, env(safe-area-inset-left));padding-right:max(16px, env(safe-area-inset-right))}

/* --- 管理画面（オーナー専用） --- */
.adminnav{display:flex;gap:14px;flex-wrap:wrap;padding:12px 2px 4px;font-size:13px}
.adminnav a{color:var(--sub)}
.adminnav a:hover{color:var(--ink)}
.adminsearch{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:10px 0 14px}
.adminsearch label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--sub);flex:1 1 220px}
.adminsearch input{min-height:44px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font-size:16px}
.gauge{height:8px;border-radius:999px;background:var(--panel2);border:1px solid var(--line);overflow:hidden;margin:12px 0 8px}
.gauge-fill{height:100%;background:var(--accent);border-radius:999px}

/* ===== 第4弾（2026-10-29）: 上部の余白／スケルトン／動きの作法 =====
   余白: ヘッダー→プロフィール→見出しの上部まわりが詰まって見えたため、
   小さく洗練の前提は保ったまま、少しだけ広げて息をさせる。 */
main{padding:40px 0 48px}
header.site .bar{padding-top:12px;padding-bottom:12px}
header.site .bar{padding-top:calc(12px + env(safe-area-inset-top))}
.me.summary{margin:6px 0 4px}
.grouplabel{margin:26px 2px 8px}

/* 画面の入場：スッと（小さな浮き上がり＋フェード。Apple式の静かな動きのみ。
   安いバウンス・爆発的ズームは使わない）。子要素にわずかな時差をつける。 */
@keyframes az-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
main.wrap>*{animation:az-enter .45s cubic-bezier(.22,.9,.24,1) both}
main.wrap>*:nth-child(2){animation-delay:.04s}
main.wrap>*:nth-child(3){animation-delay:.08s}
main.wrap>*:nth-child(4){animation-delay:.12s}
main.wrap>*:nth-child(5){animation-delay:.16s}
main.wrap>*:nth-child(6){animation-delay:.2s}

/* 触れた所の小さな反応 */
.me.summary{transition:opacity .15s ease}
.me.summary:active{opacity:.65}
.who-chip{transition:opacity .15s ease}
.who-chip:active{opacity:.6}
a.srow .chev{transition:transform .18s cubic-bezier(.22,.9,.24,1)}
a.srow:active .chev{transform:translateX(2px)}
.gcard{transition:transform .18s cubic-bezier(.22,.9,.24,1),border-color .18s ease}
.gcard:hover{transform:translateY(-1px)}
.gcard:active{transform:translateY(0) scale(.99)}
.card{transition:border-color .18s ease}

/* スケルトン：読み込みが目立つ所だけに絞る（通知の状態表示／お支払いの確定待ち）。
   形だけ先に出し、静かに明滅する程度。派手な点滅やシマーは使わない。 */
.skl{display:block;background:var(--panel2);border:1px solid var(--line);border-radius:8px;animation:az-skl 1.8s ease-in-out infinite alternate}
@keyframes az-skl{from{opacity:.45}to{opacity:.9}}
.skl-mini{display:inline-block;width:46px;height:12px;border-radius:6px;vertical-align:-1px}
.skl-line{height:14px;border-radius:7px}
.skl-line.w50{width:50%}
.skl-line.w60{width:60%}
.skl-row{height:52px;border-radius:12px}
.skl-stack{display:flex;flex-direction:column;gap:10px;margin:14px 0}

@media (prefers-reduced-motion: reduce){
  main.wrap>*{animation:none}
  .skl{animation:none}
  .gcard,a.srow .chev,.me.summary,.who-chip{transition:none}
}

/* 操作に伴う待ちの線（progress.js が制御）。画面上端に 2px、
   基調のアクセント色で溶けるように。点滅なし。 */
#az-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9999;pointer-events:none;
  background:linear-gradient(90deg,rgba(57,213,232,.55),var(--accent));
  transform-origin:left center;transform:scaleX(0);opacity:0}

/* ===== ランキング集約（2026-10-29） =====
   行リストの文法に合わせ、順位は左の小さな列、スコアは右に静かに揃える。 */
.rk-rank{flex:none;width:30px;text-align:center;font-weight:800;color:var(--sub);font-variant-numeric:tabular-nums}
.rk-rank.top{color:var(--accent)}
.rk-score{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.srow.mine{background:rgba(57,213,232,.07)}
.rk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.rk-chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:5px 13px;font-size:12.5px;color:var(--ink);background:var(--panel)}
.rk-chip b{color:var(--accent)}
.rk-chip:hover{text-decoration:none;border-color:rgba(57,213,232,.5)}

/* ===== アズコイン購入＋法定表示＋お問い合わせ（2026-10-29 夜） ===== */
label select,label textarea{width:100%;box-sizing:border-box;margin-top:5px;background:var(--panel2,#141636);border:1px solid var(--line);border-radius:10px;color:var(--ink);font:inherit;font-size:14px;padding:9px 11px}
/* パック行（2026-11-04 改修）: 旧構造は form（＝ボタン）が flex の縮小配分で
   ボタンの自然幅を割り込み、ラベルが1文字ずつ縦に折れて背高いピルに崩れた。
   対策は構造で：購入側（.packact／直置きの .packbuy）は flex:none で幅を固定し、
   .packmain だけが flex:1＋min-width:0 で縮みと折り返しを全部引き受ける。
   ボタンにも nowrap と指で囲める高さ（44px）を明示し、再発しない形にした。 */
.llist .packrow{justify-content:flex-start;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin:0 0 9px}
.llist .packrow:last-child{border-bottom:1px solid var(--line);margin-bottom:2px}
.packcoin{flex:none;display:inline-flex;width:24px;height:24px}
.packcoin svg{width:24px;height:24px;display:block}
.packmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.packtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.packunits{font-weight:800;font-size:18px;line-height:1.25;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.packunit-name{font-size:12.5px;font-weight:700;color:var(--sub);margin-left:6px;letter-spacing:.02em}
.packchips{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.packrow .badge{line-height:1.4;padding:1px 8px}
.packprice{display:flex;align-items:center;gap:6px;flex-wrap:wrap;line-height:1.35}
.packwas{font-size:12px;color:var(--sub);text-decoration:line-through}
.packnow{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.packtax{font-size:11.5px;color:var(--sub)}
.packact{flex:none;margin:0}
.packbuy{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;line-height:1.2}
.packrow>.packbuy{flex:none}
.legaltable{margin:6px 0 0}
.legaltable>div{display:flex;gap:14px;padding:9px 2px;border-bottom:1px solid var(--line)}
.legaltable>div:last-child{border-bottom:none}
.legaltable dt{flex:0 0 9.5em;font-weight:600;font-size:13px}
.legaltable dd{margin:0;flex:1;font-size:13.5px;line-height:1.7}
.contactrow{align-items:flex-start}
.contactmain{display:flex;flex-direction:column;gap:5px;min-width:0}
.contactbody{font-size:13px;color:var(--sub);white-space:pre-wrap;word-break:break-word}
button.btn[disabled]{opacity:.45;cursor:default}

/* ===== Safariハードゲート（2026-10-30・登録系はSafari必須） =====
   iOSの非Safari（Chrome/Firefox/アプリ内ブラウザ）でのみ views.ts の
   インライン判定が #azSafariGate を開く。抜け道なし・閉じるボタンなし。
   スタンドアロン（ホーム画面から起動）は対象外。 */
.azgate{position:fixed;inset:0;z-index:100000;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px 20px;overflow:auto}
.azgate[hidden]{display:none}
.azgate-card{max-width:420px;width:100%;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 22px}
.azgate-kicker{margin:0;font-size:11px;letter-spacing:.3em;color:var(--accent);font-weight:700}
.azgate-title{margin:10px 0 0;font-size:21px}
.azgate-lead{margin:12px 0 0;color:var(--sub);font-size:13.5px;line-height:1.8}
.azgate-btn{margin-top:18px;width:100%;text-align:center;font-size:15px;padding:13px 22px}
.azgate-done{margin:12px 0 0;color:var(--ok);font-size:13px;font-weight:700}
.azgate-steps{margin:16px 0 0;padding-left:20px;color:var(--sub);font-size:13px;line-height:1.9}

/* 「入る」ボタンの視認性（2026-10-30）: 文字色 #04222a × 地 #39d5e8 は
   コントラスト比 約9.4:1 で元々十分だが、実機で小さく薄く見えたため
   寸法は .btn.small 側（8px 17px / 13.5px）で確実に読める大きさにした。 */

/* ===== 第5弾（2026-10-31）: シェルの固定＋ホームのコンソール化 =====
   シェル: body は縦フレックス（min-height:100dvh）で main が伸び、
   フッターは margin-top:auto で常に画面下端へ。短いページ（ランキング
   詳細など）でもフッターが中ほどに浮かない。長いページでは従来どおり
   本文に続く。フッター下端はセーフエリア分を既存ルールで確保済み。
   上部余白: ヘッダー直下の空きは main の padding-top（40px）が唯一の
   持ち主。全ページ共通で、戻るリンク・見出しがヘッダーに触れない。 */
footer.site{margin-top:auto}

/* ホームのアズコイン残高カード（行より一段だけ大きい、静かな主役） */
.card.coin{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;color:var(--ink)}
.card.coin:hover{text-decoration:none;border-color:rgba(57,213,232,.5)}
.card.coin:active{opacity:.85}
.coin-main{display:flex;align-items:baseline;gap:10px;min-width:0}
.coin-cap{font-size:12px;font-weight:700;color:var(--sub);letter-spacing:.08em;flex:none}
.coin-num{font-size:24px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums}
.coin-go{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--accent);flex:none}
.coin-go .chev{color:var(--accent);font-size:18px;line-height:1}
.portalrow{margin-top:26px}

/* マイページの AzPoint 残高カード（2026-11-02）: 数字が主役、ラベルと
   期限は小さく灰色。文法はホームのアズコインカード（.card.coin）と共通で、
   ここでは遷移先を持たない静かな表示カードとして置く。 */
.card.points{display:flex;flex-direction:column;gap:2px;padding:16px 18px}
.points-line{display:flex;align-items:baseline;gap:6px}
.points-num{font-size:30px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.points-unit{font-size:13px;font-weight:700;color:var(--sub)}
.points-note{margin-top:6px}
/* AzmallでAzPointが使える告知（2026-11-03、経済圏 第1手）: 残高カード内の
   1行リンク。文法は .coin-go（アクセント色＋シェブロン）に合わせる。 */
.points-use{margin-top:8px;color:var(--accent);font-weight:700}
.points-use:hover{text-decoration:none;opacity:.85}
.points-use .chev{color:var(--accent);font-size:15px;line-height:1;margin-left:4px}

/* ===== ウェルカム見出し（2026-10-31 ハウス法：会社ロゴ先行） =====
   ホーム先頭だけ。AZRION 本社の馬ロゴを小さく静かに白で出し、その下に
   一行の歓迎。既存コンソールの順序・寸法には触れない。 */

/* ===== プロフィール写真のトリミング（2026-11-01） =====
   写真を選んだら即保存せず、下からスッと出るシートで切り取り範囲を
   合わせてから保存する。ガイド（丸）は固定で、写真の方が下で動く。
   保存先・形式は従来どおり（/mypage/photo・最大512px四方・JPEG）。 */
.cropsheet{position:fixed;inset:0;z-index:9000}
.cropsheet[hidden]{display:none}
.crop-backdrop{position:absolute;inset:0;background:rgba(3,4,16,.66);opacity:0;transition:opacity .24s ease}
.cropsheet.open .crop-backdrop{opacity:1}
.crop-panel{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;max-height:94dvh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-bottom:none;border-radius:20px 20px 0 0;padding:18px 18px calc(18px + env(safe-area-inset-bottom));transform:translateY(14px);opacity:0;transition:transform .26s cubic-bezier(.22,.9,.24,1),opacity .22s ease}
.cropsheet.open .crop-panel{transform:none;opacity:1}
.crop-title{font-size:16px;margin:0 0 6px}
.crop-stage{position:relative;width:min(100%,336px);aspect-ratio:1/1;margin:12px auto 4px;border-radius:14px;overflow:hidden;background:var(--panel2);border:1px solid var(--line);touch-action:none}
.crop-stage canvas{display:block;width:100%;height:100%}
.crop-guide{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(57,213,232,.95);box-shadow:0 0 0 999px rgba(4,5,20,.48);pointer-events:none}
.crop-previews{display:flex;gap:22px;justify-content:center;margin:10px 0 2px}
.crop-previews figure{margin:0;text-align:center}
.crop-previews canvas{display:block;width:52px;height:52px;background:var(--panel2)}
.crop-previews .pv-round{border-radius:50%}
.crop-previews .pv-sq{border-radius:22%}
.crop-previews figcaption{font-size:11px;color:var(--sub);margin-top:4px}
.crop-zoom{display:flex;align-items:center;gap:12px;margin:12px 0 4px}
.crop-zoom input[type=range]{flex:1;accent-color:var(--accent);height:28px;margin:0}
.crop-btns{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;margin-top:12px}
.crop-btns .filebtn{display:inline-flex;align-items:center}
#cropSave{flex:1;min-width:128px}
/* 完了トースト（azptrピルと同じ作法・基調色に合わせたもの） */
.aztoast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);transform:translate(-50%,-8px);z-index:9600;display:inline-flex;align-items:center;gap:6px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);font-size:12.5px;font-weight:600;line-height:1;padding:9px 14px;border-radius:999px;box-shadow:0 10px 24px rgba(3,4,16,.45);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .38s cubic-bezier(.22,.9,.28,1)}
.aztoast[hidden]{display:none}
.aztoast.show{opacity:1;transform:translate(-50%,0)}
.aztoast svg{color:var(--ok);flex:none}
@media (prefers-reduced-motion: reduce){
  .crop-backdrop,.crop-panel,.aztoast{transition:none}
}