/* base.css 変数・リセット・共通部品（色は必ず変数経由。ダークテーマのみ） */
:root{
  --bg:#0b0e14; --bg-elev:#121722; --card:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.10); --text:#e8ecf4; --text-dim:#9aa4b8;
  --accent:#4da3ff; --buy:#2ecc8f; --sell:#ff5d6c; --warn:#f5b942;
  --zone:#4da3ff; --trigger:#f5d442;
  --ln1:#4da3ff; --ln2:#f5b942; --ln3:#c792ea; --ln4:#2ecc8f; --ln5:#ff8a5c; --ln6:#7fdbff;
  --radius:14px; --gap:12px;
  --safe-top:env(safe-area-inset-top); --safe-bottom:env(safe-area-inset-bottom);
  --font:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;
  --tabbar-h:3.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark}
html,body{margin:0;height:100%;max-width:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font);font-size:100%;line-height:1.5;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
body{overscroll-behavior:none}
h1,h2,h3,p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
input,textarea,[contenteditable],.code-input{-webkit-user-select:text;user-select:text}
img,svg,canvas{max-width:100%}
button{cursor:pointer}
table{border-collapse:collapse;width:100%}
.hidden{display:none!important}
.dim{color:var(--text-dim)}
.buy{color:var(--buy)} .sell{color:var(--sell)} .warn{color:var(--warn)}
.num{font-variant-numeric:tabular-nums}

/* レイアウト */
#app{display:flex;flex-direction:column;height:100%;height:100dvh;max-width:100%;overflow:hidden}
#app-header{flex:none;padding:calc(var(--safe-top) + .5rem) 1rem .5rem;background:var(--bg-elev);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
#app-header .app-title{font-size:1.0625rem;font-weight:700}
#app-main{flex:1;min-height:0;position:relative;max-width:100%;overflow:hidden}
.screen{display:none;position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:var(--gap) var(--gap) calc(var(--tabbar-h) + var(--safe-bottom) + var(--gap))}
.screen.active{display:block}
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;height:calc(var(--tabbar-h) + var(--safe-bottom));padding-bottom:var(--safe-bottom);background:rgba(18,23,34,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border)}
#tabbar [data-tab]{flex:1;min-width:0;min-height:44px;background:none;border:0;color:var(--text-dim);font-size:.8125rem;padding:0 .125rem;transition:color .15s,transform .1s}
#tabbar [data-tab].active{color:var(--accent);font-weight:700}
#tabbar [data-tab].pressed{transform:scale(.94)}

/* 共通部品 */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--gap);margin-bottom:var(--gap);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.card-title{font-size:.9375rem;font-weight:700;margin-bottom:.5rem}
.row{display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap}
.row.between{justify-content:space-between}
.field{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.75rem}
.field label{font-size:.8125rem;color:var(--text-dim)}
input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{width:100%;min-height:44px;padding:.5rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:10px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
.btn{min-height:44px;padding:.5rem 1rem;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);transition:transform .1s,background .15s}
.btn.pressed{transform:scale(.96)}
.btn:disabled{opacity:.4}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--bg);font-weight:700}
.btn-danger{background:var(--sell);border-color:var(--sell);color:var(--bg);font-weight:700}
.segment{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.segment-btn{min-height:44px;padding:0 .875rem;background:none;border:0;color:var(--text-dim);font-size:.875rem}
.segment-btn.active{background:var(--accent);color:var(--bg);font-weight:700}
.segment-btn.pressed{opacity:.7}
.chip{display:inline-block;padding:.125rem .5rem;border-radius:999px;border:1px solid var(--border);font-size:.8125rem;color:var(--text-dim)}
.chip-ok{color:var(--buy);border-color:var(--buy)} .chip-warn{color:var(--warn);border-color:var(--warn)} .chip-error{color:var(--sell);border-color:var(--sell)} .chip-info{color:var(--accent);border-color:var(--accent)}
.progress{width:100%;background:linear-gradient(var(--border),var(--border)) top/100% .5rem no-repeat}
.progress-bar{height:.5rem;width:0;background:var(--accent);border-radius:999px;transition:width .2s}
.progress-label{font-size:.8125rem;color:var(--text-dim);margin-top:.25rem}
.placeholder{color:var(--text-dim);text-align:center;padding:2rem 1rem}
.banner{background:var(--warn);color:var(--bg);padding:.5rem 1rem;font-size:.875rem;display:flex;align-items:center;justify-content:space-between;gap:var(--gap)}
.banner .btn{min-height:36px;padding:.25rem .75rem}

/* トースト */
.toast-host{position:fixed;left:0;right:0;top:calc(var(--safe-top) + .5rem);z-index:100;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none}
.toast{max-width:90%;padding:.625rem 1rem;border-radius:12px;background:var(--bg-elev);border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.4);font-size:.875rem;animation:toast-in .2s ease-out;transition:opacity .3s,transform .3s}
.toast-success{border-color:var(--buy)} .toast-error{border-color:var(--sell)} .toast-warn{border-color:var(--warn)} .toast-info{border-color:var(--accent)}
.toast-out{opacity:0;transform:translateY(-8px)}
@keyframes toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* 処理中・モーダル */
.busy-overlay{display:none;position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);flex-direction:column;align-items:center;justify-content:center;gap:var(--gap)}
.busy-overlay.show{display:flex}
.busy-spinner{width:2.5rem;height:2.5rem;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.busy-label{font-size:.9375rem}
@keyframes spin{to{transform:rotate(360deg)}}
.modal-backdrop{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:var(--gap)}
.modal{width:100%;max-width:28rem;max-height:85%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:0 8px 32px rgba(0,0,0,.5)}
.modal-title{font-size:1.0625rem;font-weight:700;margin-bottom:.5rem}
.modal-body{font-size:.9375rem;white-space:pre-wrap;word-break:break-word}
.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}