/* owner.html 専用スタイル
   元: sm0012 Phase 1 で master.css からコピー。sm0016 D2 で背景を赤系に (master との視覚差別化)。
   sm0203 P4 (group B): native 化に伴い全規則を .sm-owner 配下へ route スコープ
   (素の body/.grid/.wrap/.lock-card が他 native 画面を clobber しないように)。
   body の全画面赤系背景は wrapper (.sm-owner) で再現。auth カードは h1 見出し (native は h1 使用)。 */
.sm-owner { background: linear-gradient(180deg, #1c0a12 0%, #14080d 100%); color:#fff; font-family:-apple-system,sans-serif; min-height:100vh; min-height:100dvh; }
.sm-owner .wrap { max-width:1100px; margin:0 auto; padding:40px 20px; }
.sm-owner .hero { text-align:center; padding:28px 0; margin-bottom:30px; }
.sm-owner .hero h1 { margin:0 0 8px; color:#f0b73a; font-size:28px; }
.sm-owner .hero p { margin:0; color:#888; font-size:14px; }
.sm-owner .lock-card { max-width:420px; margin:60px auto; padding:30px; border-radius:14px; background:#1a1a2e; border:1px solid #2a2a4a; text-align:center; }
.sm-owner .lock-card h1 { color:#f0b73a; margin:0 0 16px; font-size:20px; }
.sm-owner .lock-card h2 { color:#f0b73a; margin:0 0 16px; }
.sm-owner .lock-card input { width:100%; padding:14px; font-size:18px; text-align:center; letter-spacing:0.4em; background:#0a0a14; border:1px solid #2a2a4a; border-radius:8px; color:#fff; box-sizing:border-box; margin:14px 0; }
.sm-owner .lock-card button { width:100%; padding:14px; font-size:16px; background:linear-gradient(135deg,#5b8cff,#7c3aed); border:0; border-radius:8px; color:#fff; font-weight:bold; cursor:pointer; }
.sm-owner .lock-card .hint { font-size:12px; color:#666; margin-top:14px; }
.sm-owner .lock-card .err { color:#f87171; font-size:13px; margin-top:10px; min-height:18px; }
/* sm0006: 初期設定画面 (Step 1/2 とも) は 32 文字 Base32 秘密鍵を収めるため幅拡張。
   native は id ではなく .lock-card.wide で表現 (init / init-confirm ビュー)。 */
.sm-owner .lock-card.wide { max-width:560px; }
.sm-owner .lock-card.wide input { font-size:14px; letter-spacing:0.12em; text-align:center; padding:12px 10px; }
.sm-owner .lock-card.wide input[readonly] { color:#9ca3af; cursor:not-allowed; background:#0a0a14; }
.sm-owner .lock-card.wide canvas { max-width:100%; height:auto; background:#fff; border-radius:8px; }
.sm-owner .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.sm-owner .co-card { background:linear-gradient(135deg,#1a1a2e,#15192a); border:1px solid #2a2a4a; border-radius:14px; padding:24px 20px; cursor:pointer; text-align:center; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s, color .15s, opacity .15s; position:relative; }
.sm-owner .co-card:hover { transform:translateY(-3px); border-color:#5b8cff; box-shadow:0 8px 20px rgba(91,140,255,.3); }
.sm-owner .co-card .logo { width:64px; height:64px; border-radius:16px; display:grid; place-items:center; font-size:30px; font-weight:bold; color:#fff; margin:0 auto 14px; overflow:hidden; }
.sm-owner .co-card .logo img { width:100%; height:100%; object-fit:cover; object-position:center; border-radius:16px; }
.sm-owner .co-card .name { font-size:14px; font-weight:700; margin-bottom:6px; }
.sm-owner .co-card .id { font-size:10px; color:#666; }
.sm-owner .co-card .badge { position:absolute; top:8px; right:8px; font-size:10px; padding:3px 7px; border-radius:999px; background:rgba(74,222,128,.2); color:#4ade80; }
.sm-owner .co-card .upload-btn { position:absolute; top:8px; left:8px; font-size:11px; padding:4px 8px; border-radius:999px; background:rgba(91,140,255,.2); color:#5b8cff; cursor:pointer; opacity:0; transition:opacity .2s; border:0; }
.sm-owner .co-card:hover .upload-btn { opacity:1; }
.sm-owner .co-card .del-btn { position:absolute; bottom:8px; right:8px; font-size:11px; padding:4px 8px; border-radius:999px; background:rgba(248,113,113,.18); color:#f87171; cursor:pointer; opacity:0; transition:opacity .2s; border:0; font-weight:bold; }
.sm-owner .co-card:hover .del-btn { opacity:1; }
.sm-owner .co-card .del-btn:hover { background:#7f1d1d; color:#fff; }
.sm-owner .co-card .num-badge { position:absolute; bottom:8px; left:8px; font-size:11px; padding:3px 8px; border-radius:6px; background:rgba(240,183,58,.15); color:#f0b73a; font-family:Menlo,Consolas,monospace; font-weight:bold; letter-spacing:.04em; cursor:pointer; }
.sm-owner .co-card .num-badge:hover { background:rgba(240,183,58,.3); }
.sm-owner .co-card .num-badge::before { content:'✏️ '; opacity:0; transition:opacity .15s; font-family:revert; }
.sm-owner .co-card:hover .num-badge::before { opacity:1; }
.sm-owner .co-card.add { background:rgba(91,140,255,.05); border:2px dashed #2a2a4a; }
.sm-owner .co-card.add:hover { border-color:#4ade80; background:rgba(74,222,128,.05); }
.sm-owner .co-card.add .logo { background:none; font-size:36px; color:#4ade80; }
.sm-owner .toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:10px; flex-wrap:wrap; }
.sm-owner .toolbar .info { font-size:13px; color:#888; }
.sm-owner .toolbar button { background:#2a2a4a; color:#fff; border:0; padding:8px 14px; border-radius:6px; cursor:pointer; font-size:13px; }
.sm-owner .toolbar button:hover { background:#3a3a5a; }