#terminal {
  --t-bg: #070418; --t-line: rgba(130,110,255,.28); --t-glow: rgba(120,90,255,.22);
  --t-ink: #e9e4ff; --t-dim: #9a91c6; --t-g: #3dffb0; --t-r: #ff4f7a; --t-gold: #ffc861; --t-pink: #ff4fa3;
  position: fixed; inset: 0; z-index: 80; display: none; flex-direction: column;
  color: var(--t-ink); font-family: "DIN Condensed", "Arial Narrow", "Helvetica Neue", "PingFang TC", "Microsoft JhengHei", sans-serif;
  background:
    linear-gradient(180deg, rgba(7,4,24,.55), rgba(7,4,24,.96) 210px),
    url("assets/img/skyline.webp") center top / cover no-repeat, #070418;
  overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch; user-select: none;
}
#terminal.on { display: flex; }
#terminal .g { color: var(--t-g); } #terminal .r { color: var(--t-r); } #terminal .dim { color: var(--t-dim); }
#terminal small { display: block; font-size: 9px; letter-spacing: .2em; color: var(--t-dim); }

.tm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: max(10px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  background: linear-gradient(90deg, rgba(40,20,110,.55), rgba(90,20,90,.35)); border-bottom: 1px solid var(--t-line); box-shadow: 0 0 30px var(--t-glow); }
.tm-brand { display: flex; gap: 10px; align-items: center; margin-right: auto; }
.tm-brand .logo { font-size: 26px; color: #c9a8ff; text-shadow: 0 0 14px #9b6bff, 0 0 30px #ff4fa3; }
.tm-brand b { font-size: 17px; letter-spacing: .28em; text-shadow: 0 0 12px rgba(160,130,255,.8); }
.tm-stat b { font-size: 19px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tm-stat i { font-style: normal; font-size: 11px; margin-left: 6px; }
.tm-clock { min-width: 120px; }
.tm-clock .bar { height: 3px; margin-top: 5px; background: rgba(150,130,255,.18); }
.tm-clock .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8a5bff, var(--t-pink)); box-shadow: 0 0 8px var(--t-pink); }
.tm-ctl { display: flex; gap: 6px; flex-wrap: wrap; }

.tm-btn { pointer-events: auto; cursor: pointer; padding: 9px 13px; font-weight: 700; font-size: 11px; line-height: 1; font-family: inherit; letter-spacing: .14em; color: #0a0620;
  background: linear-gradient(150deg, #d9c6ff, #8f6bff); border: 1px solid #e6dcff; text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); box-shadow: 0 0 16px rgba(140,100,255,.35); }
.tm-btn.ghost { background: rgba(20,12,50,.85); color: var(--t-ink); border-color: var(--t-line); box-shadow: none; }
.tm-btn.on { background: linear-gradient(150deg, #ffd689, #ff8a5c); border-color: #ffe3b0; }
.tm-btn.buy { background: linear-gradient(150deg, #8dffd6, #17c987); border-color: #b9ffe6; flex: 1; padding: 13px; font-size: 13px; }
.tm-btn.sell { background: linear-gradient(150deg, #ff9fb6, #e8325f); border-color: #ffc6d3; flex: 1; padding: 13px; font-size: 13px; }
.tm-btn:active { transform: translateY(1px); }

.tm-mission { margin: 10px max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left)); padding: 9px 14px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  border: 1px solid rgba(255,200,97,.45); background: linear-gradient(90deg, rgba(255,170,80,.14), rgba(255,79,163,.06)); box-shadow: 0 0 20px rgba(255,170,80,.12); }
.tm-mission small { color: var(--t-gold); }
.tm-mission b { font-size: 15px; letter-spacing: .06em; color: #fff0d8; }
.tm-mission i { font-style: normal; font-size: 11px; color: #ffcf9a; opacity: .8; }

.tm-grid { display: grid; gap: 10px; padding: 10px max(14px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  grid-template-columns: 220px minmax(0, 1fr) 270px; grid-template-rows: minmax(300px, 1fr) auto;
  grid-template-areas: "watch chart ticket" "news bank ticket"; flex: 1; min-height: 0; }
.tm-panel { position: relative; padding: 10px 12px; background: linear-gradient(160deg, rgba(22,14,60,.82), rgba(10,6,30,.82)); border: 1px solid var(--t-line);
  box-shadow: 0 0 22px var(--t-glow), inset 0 0 24px rgba(120,90,255,.06); backdrop-filter: blur(6px);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); min-width: 0; }
.tm-panel h4 { margin: 0 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10px; letter-spacing: .24em; color: #b9a8ff; font-weight: 700; }
.tm-panel h4.sub { margin-top: 12px; }
.tm-watchp { grid-area: watch; } .tm-chartp { grid-area: chart; display: flex; flex-direction: column; } .tm-ticket { grid-area: ticket; }
.tm-bank { grid-area: bank; } .tm-newsp { grid-area: news; }

.tm-w { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 6px; padding: 8px 8px; margin-bottom: 5px; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--t-ink); background: rgba(255,255,255,.03); border: 1px solid transparent; }
.tm-w.sel { border-color: rgba(255,79,163,.6); background: rgba(255,79,163,.1); box-shadow: inset 0 0 14px rgba(255,79,163,.15); }
.tm-w b { display: block; font-size: 14px; letter-spacing: .08em; }
.tm-w em { display: block; font-style: normal; font-size: 9.5px; color: var(--t-dim); letter-spacing: .06em; }
.tm-w .px { text-align: right; font-size: 14px; font-variant-numeric: tabular-nums; }
.tm-w .px i { display: block; font-style: normal; font-size: 10px; }
.tm-w.tm-fx { cursor: default; opacity: .85; }

.tm-chartp h4 span { font-size: 12px; letter-spacing: .1em; color: var(--t-ink); }
.tm-chartp h4 span b { font-size: 15px; color: #fff; margin-right: 4px; }
.tm-chartp h4 small { display: inline; margin-left: 6px; }
#tm-chart { flex: 1; width: 100%; min-height: 240px; display: block; }
.tm-sw { cursor: pointer; font-weight: 700; font-size: 10px; line-height: 1; font-family: inherit; letter-spacing: .14em; padding: 6px 9px; color: var(--t-dim); background: transparent; border: 1px solid var(--t-line); }
.tm-sw.on { color: #160b06; background: var(--t-gold); border-color: var(--t-gold); box-shadow: 0 0 12px rgba(255,200,97,.6); }

.tm-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tm-ba > div { padding: 8px; border: 1px solid var(--t-line); background: rgba(0,0,0,.2); }
.tm-ba b { font-size: 20px; font-variant-numeric: tabular-nums; }
.tm-ba .b b { color: var(--t-r); } .tm-ba .a b { color: var(--t-g); }
.tm-spr, .tm-cost, .tm-hold, .tm-int { font-size: 11px; color: var(--t-dim); margin: 6px 0; letter-spacing: .04em; }
.tm-qtyrow { display: flex; align-items: center; gap: 5px; margin: 8px 0; }
.tm-qtyrow b { flex: 1; text-align: center; font-size: 20px; font-variant-numeric: tabular-nums; }
.tm-qtyrow .tm-btn { padding: 8px 9px; }
.tm-bs { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-book { margin-top: 10px; font-size: 11px; font-variant-numeric: tabular-nums; }
.tm-book > div { position: relative; padding: 2px 6px; display: flex; justify-content: flex-end; }
.tm-book i { position: absolute; right: 0; top: 1px; bottom: 1px; opacity: .22; }
.tm-book .a span { color: var(--t-g); } .tm-book .a i { background: var(--t-g); }
.tm-book .b span { color: var(--t-r); } .tm-book .b i { background: var(--t-r); }
.tm-book span { position: relative; }
.tm-book .mid { justify-content: center; color: #fff; font-size: 13px; border-top: 1px solid var(--t-line); border-bottom: 1px solid var(--t-line); margin: 2px 0; }
.tm-bank .big { display: block; font-size: 22px; color: var(--t-gold); text-shadow: 0 0 12px rgba(255,200,97,.5); font-variant-numeric: tabular-nums; }
.tm-bank h4 span { color: var(--t-gold); letter-spacing: .08em; }
.tm-port > div { display: grid; grid-template-columns: 1fr 1fr 1fr; font-size: 12px; padding: 3px 0; border-bottom: 1px solid rgba(130,110,255,.12); font-variant-numeric: tabular-nums; }
#tm-news div { font-size: 11.5px; line-height: 1.45; padding: 5px 0; border-bottom: 1px solid rgba(130,110,255,.12); color: #d8d0ff; }
#tm-news div:first-child { color: #fff; text-shadow: 0 0 10px rgba(255,79,163,.6); }

#tm-flash { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translate(-50%, 10px); z-index: 85; padding: 10px 16px; max-width: 90vw; text-align: center;
  font-size: 12px; letter-spacing: .08em; color: #fff; background: rgba(14,8,40,.95); border: 1px solid rgba(255,79,163,.6); box-shadow: 0 0 24px rgba(255,79,163,.3); opacity: 0; pointer-events: none; transition: all .25s ease; }
#tm-flash.on { opacity: 1; transform: translate(-50%, 0); }

#tm-modal { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; padding: 16px; background: rgba(4,2,14,.62); backdrop-filter: blur(3px); overflow-y: auto; }
#tm-modal.on { display: grid; }
.tm-card { width: min(540px, 100%); padding: 18px 20px; background: linear-gradient(160deg, rgba(34,20,86,.96), rgba(14,8,40,.97)); border: 1px solid rgba(180,150,255,.55);
  box-shadow: 0 0 40px rgba(130,90,255,.4), inset 0 0 30px rgba(255,79,163,.08); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
.tm-card.danger { border-color: rgba(255,79,122,.8); box-shadow: 0 0 50px rgba(255,79,122,.45); }
.tm-card.intro img { width: 100%; aspect-ratio: 16/7; object-fit: cover; object-position: 50% 38%; border: 1px solid rgba(255,150,200,.35); margin-bottom: 10px; }
.tm-card .eye { color: var(--t-gold); }
.tm-by { display: flex; gap: 10px; align-items: center; }
.tm-by .av { width: 34px; height: 34px; display: grid; place-items: center; font-size: 16px; color: #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9ad0, #6b3dff); box-shadow: 0 0 14px rgba(255,79,163,.6); }
.tm-by b { font-size: 14px; letter-spacing: .1em; }
.tm-card h3 { margin: 12px 0 8px; font-size: 22px; letter-spacing: .1em; color: #fff; text-shadow: 0 0 14px rgba(170,130,255,.8); }
.tm-body { font-size: 14px; line-height: 1.6; color: #ddd5ff; letter-spacing: .02em; }
.tm-body b { color: var(--t-gold); } .tm-body i { color: #ffd7ec; }
.tm-body .teaser { margin-top: 12px; padding: 9px 11px; border: 1px dashed rgba(255,79,163,.5); color: #ffc0e0; font-size: 12.5px; }
.tm-choices { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.tm-choices .tm-btn { padding: 12px; font-size: 12px; }
.tm-explain p { font-size: 13.5px; line-height: 1.55; color: #ddd5ff; margin: 10px 0 0; }
.tm-explain .tm-btn { margin-top: 12px; width: 100%; padding: 12px; }
.tm-report { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.tm-report > div { padding: 8px 10px; border: 1px solid var(--t-line); background: rgba(0,0,0,.2); }
.tm-report b { font-size: 18px; }
.tm-codex { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; touch-action: pan-y; }
.tm-codex > div { padding: 8px 10px; border: 1px solid var(--t-line); background: rgba(0,0,0,.18); }
.tm-codex b { font-size: 13px; color: #fff; } .tm-codex p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: #cfc6f5; }
.tm-codex .lock { opacity: .45; }
.tm-names { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.tm-names label { font-size: 9px; letter-spacing: .2em; color: var(--t-dim); }
.tm-names input { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font-size: 15px; font-family: inherit; color: #fff; background: rgba(0,0,0,.3); border: 1px solid rgba(255,79,163,.5); outline: none; user-select: text; -webkit-user-select: text; }

@media (max-width: 1000px) {
  .tm-grid { grid-template-columns: minmax(0, 1fr) 260px; grid-template-rows: auto minmax(280px, 46vh) auto auto;
    grid-template-areas: "watch watch" "chart ticket" "bank ticket" "news news"; }
  #tm-watch { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 5px; }
  .tm-w { margin: 0; }
}
@media (max-width: 640px) {
  .tm-top { gap: 8px 12px; }
  .tm-brand b { font-size: 14px; letter-spacing: .2em; }
  .tm-brand small { font-size: 8px; }
  .tm-stat b { font-size: 16px; }
  .tm-ctl { width: 100%; }
  .tm-ctl .tm-btn { flex: 1; padding: 10px 6px; }
  .tm-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "watch" "chart" "ticket" "bank" "news"; }
  #tm-watch { grid-template-columns: 1fr 1fr; }
  .tm-w { padding: 6px; } .tm-w b { font-size: 13px; } .tm-w .px { font-size: 12px; }
  .tm-chartp { height: 52vh; min-height: 280px; }
  .tm-card h3 { font-size: 19px; }
  .tm-body { font-size: 13.5px; }
}
