/* 維港帳房設計守則：香港財經報章 x 可審計帳簿。暖象牙、青墨、雙線帳簿規則；Noto Serif TC 僅供標題，IBM Plex Mono 專責所有數字。 */
:root { --paper:#f5f0e7; --paper-strong:#fffdf8; --ink:#172528; --teal:#0f5962; --teal-2:#11444b; --mist:#d9e6e2; --line:#c9c5bb; --muted:#6c7370; --green:#247360; --red:#ad493b; --amber:#bf7b2d; --blue:#4f7e89; --shadow:0 14px 40px rgba(36,42,38,.08); --ease-out:cubic-bezier(.23,1,.32,1); --mono:"IBM Plex Mono", monospace; --sans:"Noto Sans TC", sans-serif; --serif:"Noto Serif TC", serif; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.55; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
button:active { transform:scale(.97); }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:248px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:26px 16px 20px; border-right:1px solid var(--line); background:rgba(245,240,231,.95); }
.brand { display:flex; align-items:center; gap:11px; padding:0 9px 27px; border-bottom:3px double var(--teal); }
.brand img { width:36px; height:36px; object-fit:contain; }
.brand-seal { display:none; width:36px; height:36px; position:relative; flex:0 0 auto; overflow:hidden; background:var(--teal); }
.brand-seal:before,.brand-seal:after { position:absolute; content:""; background:var(--paper); }
.brand-seal:before { width:21px; height:2px; left:8px; top:10px; box-shadow:0 7px 0 var(--paper),0 14px 0 var(--paper); }
.brand-seal:after { width:5px; height:5px; right:7px; bottom:6px; border-radius:50%; background:#9ecbd0; }
.brand-wordmark { font-family:var(--serif); font-size:21px; line-height:1; letter-spacing:.08em; color:var(--teal-2); font-weight:900; }
.brand-caption,.eyebrow,.micro-label { color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
.brand-caption { margin-top:3px; letter-spacing:.02em; text-transform:none; }
.nav { display:grid; gap:4px; padding:22px 0; }
.nav-title { padding:0 9px 7px; color:var(--muted); font-family:var(--mono); font-size:10px; letter-spacing:.12em; }
.nav-button { display:flex; align-items:center; gap:10px; width:100%; border:0; border-left:3px solid transparent; background:transparent; color:#4d5856; padding:9px 10px 9px 12px; text-align:left; transition:background 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out); }
.nav-button:hover { background:rgba(15,89,98,.07); color:var(--teal-2); }
.nav-button.active { border-left-color:var(--teal); background:rgba(15,89,98,.1); color:var(--teal-2); font-weight:700; }
.nav-mark { width:18px; height:18px; display:grid; place-items:center; border:1px solid currentColor; font:10px var(--mono); }
.sidebar-bottom { margin-top:auto; padding-top:18px; border-top:1px solid var(--line); }
.sidebar-note { margin:0 8px 12px; font-size:11px; color:var(--muted); line-height:1.65; }
.btn { border:1px solid var(--teal); background:var(--teal); color:#fff; padding:9px 13px; font-size:13px; font-weight:700; transition:transform 160ms var(--ease-out), background 160ms var(--ease-out); }
.btn:hover { background:var(--teal-2); }
.btn.secondary { background:transparent; color:var(--teal-2); }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn.danger { border-color:var(--red); background:var(--red); }
.btn.small { padding:6px 9px; font-size:12px; }
.btn.full { width:100%; }
.main { min-width:0; padding:32px 36px 48px; }
.topline { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:26px; }
.page-title { margin:0; font-family:var(--serif); font-size:30px; line-height:1.25; letter-spacing:.01em; }
.page-subtitle { margin:5px 0 0; color:var(--muted); font-size:13px; }
.top-actions { display:flex; align-items:center; gap:8px; }
.status-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:var(--green); }
.masthead { position:relative; min-height:170px; overflow:hidden; display:flex; align-items:flex-end; padding:27px 30px; margin-bottom:28px; border:1px solid rgba(15,89,98,.25); box-shadow:var(--shadow); background-color:#ece8df; background-image:linear-gradient(90deg,rgba(245,240,231,.95) 0%,rgba(245,240,231,.8) 46%,rgba(245,240,231,.1) 100%),url('/manus-storage/victoria-ledger-market-atlas_a7f96323.png'); background-size:cover; background-position:center; }
.masthead:after { position:absolute; inset:10px; content:""; border:1px solid rgba(15,89,98,.28); pointer-events:none; }
.masthead-inner { position:relative; z-index:1; max-width:640px; }
.masthead h2 { margin:3px 0 5px; font:700 27px/1.3 var(--serif); color:var(--teal-2); }
.masthead p { max-width:540px; margin:0; font-size:13px; color:#40504f; }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:26px; }
.metric { min-height:108px; padding:15px 16px; background:rgba(255,253,248,.75); border-top:3px double var(--teal); box-shadow:0 5px 16px rgba(43,51,46,.04); }
.metric .label { color:var(--muted); font-size:11px; }
.metric .value { margin-top:9px; font:600 22px/1.1 var(--mono); letter-spacing:-.04em; }
.metric .foot { margin-top:7px; color:var(--muted); font-size:11px; }
.positive { color:var(--green)!important; } .negative { color:var(--red)!important; } .neutral { color:var(--ink)!important; }
.two-column { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(285px,.8fr); gap:20px; align-items:start; }
.panel { background:var(--paper-strong); border:1px solid var(--line); box-shadow:0 5px 18px rgba(43,51,46,.04); }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 17px 12px; border-bottom:3px double var(--line); }
.panel-title { margin:0; font:700 17px/1.3 var(--serif); }
.panel-body { padding:15px 17px; }
.panel-image { min-height:260px; background:url('/manus-storage/victoria-ledger-newsprint-grid_675538e2.png') center/cover; }
.table-wrap { overflow:auto; }
.data-table { width:100%; min-width:690px; border-collapse:collapse; font-size:12px; }
.data-table th { position:sticky; top:0; z-index:1; padding:8px 10px; background:#eee9df; color:#5f6865; font-weight:600; text-align:left; white-space:nowrap; border-bottom:1px solid var(--line); }
.data-table td { padding:11px 10px; border-bottom:1px solid #e4dfd5; vertical-align:middle; }
.data-table tbody tr { transition:background 160ms var(--ease-out); }
.data-table tbody tr:hover { background:#f4f7f3; }
.data-table .number { font-family:var(--mono); text-align:right; font-size:11px; white-space:nowrap; }
.data-table th.number { text-align:right; }
.ticker { display:flex; align-items:center; gap:8px; font-family:var(--mono); font-weight:600; }
.ticker-badge { min-width:25px; height:25px; display:grid; place-items:center; border:1px solid var(--teal); color:var(--teal); font-size:9px; font-weight:600; }
.asset-name { display:block; color:var(--muted); font-family:var(--sans); font-weight:400; font-size:10px; }
.tag { display:inline-flex; align-items:center; border:1px solid currentColor; padding:2px 5px; color:var(--teal); background:#edf5f3; font:10px var(--mono); }
.tag.mpf { color:var(--amber); background:#fff7e9; }
.tag.sell { color:var(--red); background:#fff2ee; }
.tag.buy { color:var(--green); background:#eff8f4; }
.account-list { display:grid; gap:0; }
.account-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 0; border-bottom:1px solid #e3ddd2; }
.account-item:last-child { border-bottom:0; }
.account-stamp { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; background:var(--teal); color:white; font:10px var(--mono); }
.account-meta { flex:1; min-width:0; }
.account-name { font-weight:700; font-size:13px; }
.account-detail { color:var(--muted); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.balance-line { color:var(--teal-2); font:600 11px var(--mono); text-align:right; }
.empty { display:grid; place-items:center; min-height:180px; padding:28px; text-align:center; color:var(--muted); background:linear-gradient(135deg,rgba(217,230,226,.42),transparent); }
.empty-mark { width:34px; height:34px; margin-bottom:11px; display:grid; place-items:center; color:var(--teal); border:1px solid var(--teal); font:11px var(--mono); }
.empty strong { color:var(--ink); font-family:var(--serif); font-size:16px; }
.empty p { max-width:360px; margin:5px 0 13px; font-size:12px; }
.ledger-toolbar { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:18px; padding:13px 15px; background:#eae7de; border-top:3px double var(--teal); }
.filter-group { display:flex; flex-wrap:wrap; gap:10px; }
.field { display:grid; gap:5px; }
.field label { color:#596361; font-size:11px; font-weight:600; }
select,input,textarea { width:100%; border:1px solid #bbb8ae; background:#fffdf9; color:var(--ink); padding:8px 9px; outline:none; transition:border 150ms var(--ease-out), box-shadow 150ms var(--ease-out); }
select:focus,input:focus,textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,89,98,.12); }
textarea { min-height:78px; resize:vertical; }
.field.inline { min-width:150px; }
.section-rule { display:flex; align-items:center; gap:12px; margin:26px 0 14px; color:var(--teal-2); font:700 18px var(--serif); }
.section-rule:after { height:3px; flex:1; content:""; border-top:3px double var(--line); }
.mpf-hero { display:grid; grid-template-columns:1fr 190px; gap:14px; overflow:hidden; padding:18px; background:#f6f0e2 url('/manus-storage/victoria-ledger-mpf-atlas_7d8d92cd.png') right center/auto 100% no-repeat; border:1px solid #d2b984; }
.mpf-hero h3 { margin:5px 0 6px; font:700 21px var(--serif); color:#55472f; }
.mpf-hero p { max-width:600px; margin:0; color:#635a48; font-size:12px; }
.market-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(270px,.75fr); gap:20px; }
.quote-box { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; padding:20px 18px; background:#e4efec; border-top:3px double var(--teal); }
.quote-price { margin-top:5px; font:600 34px/1 var(--mono); letter-spacing:-.06em; }
.quote-delta { font:600 14px var(--mono); }
.chart-area { padding:16px; min-height:310px; }
.news-list { list-style:none; margin:0; padding:0; }
.news-list li { padding:12px 0; border-bottom:1px solid #e1ddd4; }
.news-list li:last-child { border-bottom:none; }
.news-list a { display:block; text-decoration:none; font-size:13px; font-weight:700; line-height:1.55; }
.news-list a:hover { color:var(--teal); text-decoration:underline; }
.news-meta { margin-top:4px; color:var(--muted); font:10px var(--mono); }
.calculator { display:grid; grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr); gap:20px; }
.calc-form { padding:18px; background:#eae7de; border-top:3px double var(--teal); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.form-grid .span-2 { grid-column:span 2; }
.calc-result { padding:6px 0; }
.cost-row { display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid #ded9d0; }
.cost-row strong { font:600 13px var(--mono); }
.cost-total { display:flex; justify-content:space-between; gap:16px; margin-top:16px; padding:16px; background:#e4efec; border-top:3px double var(--teal); }
.cost-total strong { font:600 20px var(--mono); }
.disclaimer { margin-top:15px; padding:11px 13px; border-left:3px solid var(--amber); color:#5a564e; background:#fff8e9; font-size:11px; line-height:1.65; }
.modal-backdrop { position:fixed; z-index:20; inset:0; display:grid; place-items:center; padding:18px; background:rgba(20,30,29,.48); backdrop-filter:blur(3px); }
.modal { width:min(650px,100%); max-height:calc(100vh - 36px); overflow:auto; background:var(--paper-strong); border:1px solid var(--teal); box-shadow:0 25px 80px rgba(0,0,0,.26); animation:modal-enter 220ms var(--ease-out); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:3px double var(--line); }
.modal-title { margin:0; font:700 20px var(--serif); }
.modal-close { width:28px; height:28px; border:0; background:transparent; color:var(--muted); font:19px var(--mono); }
.modal-body { padding:18px; }
.modal-foot { display:flex; justify-content:flex-end; gap:8px; padding:14px 18px; border-top:1px solid var(--line); }
.transaction-fields { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:11px; }
.transaction-fields .wide { grid-column:span 3; }
.trade-estimator { margin-top:18px; border:1px solid rgba(15,89,98,.34); background:#edf4f1; }
.trade-estimator-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:13px 15px 10px; border-bottom:3px double rgba(15,89,98,.4); }
.trade-estimator-title { margin:2px 0 0; color:var(--teal-2); font:700 17px var(--serif); }
.trade-estimator-body { padding:14px 15px; }
.trade-estimator-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.trade-estimator-result { min-height:52px; margin-top:13px; padding:11px 12px; background:#fffdf8; border-left:3px solid var(--teal); color:#53605d; font-size:12px; }
.trade-estimator-result strong { color:var(--teal-2); font-family:var(--mono); }
.trade-estimator-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }
.toast-region { position:fixed; z-index:30; right:18px; bottom:18px; display:grid; gap:8px; max-width:min(380px,calc(100vw - 36px)); }
.toast { padding:11px 13px; color:#fff; background:var(--teal-2); box-shadow:var(--shadow); font-size:12px; animation:toast-enter 180ms var(--ease-out); }
.toast.error { background:var(--red); }
.login-screen { min-height:100vh; display:grid; place-items:center; padding:20px; background:var(--paper); background-image:linear-gradient(120deg,rgba(245,240,231,.95),rgba(245,240,231,.78)),url('/manus-storage/victoria-ledger-market-atlas_a7f96323.png'); background-size:cover; }
.login-card { width:min(430px,100%); padding:28px; background:rgba(255,253,248,.95); border:1px solid var(--teal); box-shadow:0 20px 60px rgba(30,40,37,.14); }
.login-brand { display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:3px double var(--teal); }
.login-brand img { width:47px; height:47px; }
.login-brand .brand-seal { width:47px; height:47px; }
.login-brand .brand-seal:before { width:27px; left:10px; top:13px; box-shadow:0 9px 0 var(--paper),0 18px 0 var(--paper); }
.login-brand .brand-seal:after { right:9px; bottom:8px; }
.login-card h1 { margin:25px 0 6px; font:900 27px var(--serif); }
.login-card p { margin:0 0 20px; color:var(--muted); font-size:13px; }
.login-card form { display:grid; gap:13px; }
.settings-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.reference-box { padding:15px; background:#f6f3ea; border-left:3px solid var(--teal); font-size:12px; }
.reference-box p { margin:0 0 8px; }
.reference-box p:last-child { margin-bottom:0; }
@keyframes modal-enter { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes toast-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:1080px) { .summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .two-column,.market-layout { grid-template-columns:1fr; } .main { padding:26px 24px 42px; } }
@media (max-width:760px) { .app-shell { display:block; } .sidebar { position:sticky; z-index:10; top:0; height:auto; padding:12px 14px; border-right:0; border-bottom:1px solid var(--line); } .brand { padding:0 2px 10px; border-bottom:0; } .brand img { width:31px; height:31px; } .brand-wordmark { font-size:18px; } .brand-caption,.sidebar-note,.sidebar-bottom { display:none; } .nav { display:flex; overflow:auto; gap:4px; padding:8px 0 0; } .nav-title { display:none; } .nav-button { width:auto; flex:0 0 auto; padding:7px 9px; border-left:0; border-bottom:2px solid transparent; white-space:nowrap; } .nav-button.active { border-left:0; border-bottom-color:var(--teal); } .main { padding:22px 15px 34px; } .topline { flex-direction:column; margin-bottom:18px; } .top-actions { width:100%; } .top-actions .btn { flex:1; } .page-title { font-size:26px; } .masthead { min-height:188px; padding:22px; margin:0 -3px 20px; } .masthead h2 { font-size:23px; } .summary-grid { grid-template-columns:1fr 1fr; gap:8px; } .metric { min-height:98px; padding:13px; } .metric .value { font-size:18px; } .ledger-toolbar,.calculator,.settings-grid { display:grid; grid-template-columns:1fr; } .filter-group { display:grid; grid-template-columns:1fr 1fr; } .field.inline { min-width:0; } .transaction-fields { grid-template-columns:1fr 1fr; } .transaction-fields .wide { grid-column:span 2; } .mpf-hero { grid-template-columns:1fr; background-size:cover; background-blend-mode:screen; } }
@media (max-width:430px) { .summary-grid { grid-template-columns:1fr; } .filter-group,.form-grid,.transaction-fields { grid-template-columns:1fr; } .form-grid .span-2,.transaction-fields .wide { grid-column:span 1; } .quote-box { display:block; } .quote-delta { margin-top:10px; } }
@media (max-width:600px) { .trade-estimator-grid { grid-template-columns:1fr 1fr; } .trade-estimator-actions { justify-content:stretch; } .trade-estimator-actions .btn { flex:1; } }