:root {
  --ink: #102b32;
  --muted: #6c7e81;
  --soft: #edf4f2;
  --line: #dce8e5;
  --teal: #087f78;
  --teal-2: #12a596;
  --lime: #b8e06f;
  --orange: #ef8e4a;
  --danger: #d95555;
  --navy: #08242c;
  --white: #fff;
  --shadow: 0 14px 40px rgba(17, 55, 58, .1);
  font-family: Inter, "Noto Sans", "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  color: var(--ink);
  background: #eff5f3;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100dvh; background: #eff5f3; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.login-view { min-height: 100dvh; position: relative; overflow: hidden; background: radial-gradient(circle at 85% 5%, #174d50, transparent 34%), linear-gradient(155deg, #061b23 5%, #0b3439 72%, #0a4b48); color: white; }
.login-view::after { content:""; position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size: 34px 34px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.login-aurora { position:absolute; border-radius:50%; filter:blur(12px); opacity:.42; }
.aurora-one { width:260px; height:260px; right:-120px; top:16%; background:#28c8a8; }
.aurora-two { width:210px; height:210px; left:-130px; bottom:2%; background:#d5e85f; opacity:.16; }
.login-shell { position:relative; z-index:2; width:100%; min-height:100dvh; max-width:460px; margin:auto; padding: max(58px, 9vh) 24px 30px; display:flex; flex-direction:column; align-items:center; }
.brand-mark { width:76px; height:76px; display:grid; place-items:center; background:linear-gradient(145deg,#b8e06f,#59d5a3); color:#08242c; border-radius:22px; box-shadow:0 18px 50px rgba(75,222,169,.25); transform:rotate(-2deg); }
.brand-mark svg { width:45px; stroke-width:0; fill:currentColor; }
.brand-mark .accent, .mini-mark .accent { fill:#efffd8; }
.login-title { width:calc(100vw - 48px); max-width:412px; text-align:center; margin:25px 0 28px; }
.eyebrow { color:#a9d5ca !important; letter-spacing:.16em; font-size:10px !important; font-weight:800; margin-bottom:12px !important; }
.login-title h1 { margin:0; font-size:28px; letter-spacing:-.03em; }
.login-title > p:last-child { margin:7px 0 0; color:#b8ccc9; font-size:15px; }
.login-card { width:calc(100vw - 48px); max-width:412px; background:rgba(255,255,255,.98); color:var(--ink); border-radius:25px; padding:25px 22px 20px; box-shadow:0 30px 70px rgba(0,0,0,.26); backdrop-filter:blur(18px); }
.login-title { max-width:100%; }
.login-title h1 { overflow-wrap:anywhere; }
label { display:flex; flex-direction:column; gap:2px; margin-bottom:9px; color:var(--ink); font-size:13px; font-weight:700; }
label small { color:var(--muted); font-size:11px; font-weight:500; }
.input-wrap { position:relative; }
.input-wrap svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:21px; color:#6b8886; }
input, select, textarea { width:100%; border:1px solid var(--line); border-radius:14px; background:#f7faf9; color:var(--ink); outline:none; padding:13px 14px; transition:.2s; }
.input-wrap input { padding-left:44px; height:50px; }
.pin-login-block { margin-top:15px; }
.pin-login-block label { margin-bottom:7px; }
.pin-input-wrap input { letter-spacing:.42em; font-size:18px; font-weight:800; }
input:focus, select:focus, textarea:focus { border-color:var(--teal-2); box-shadow:0 0 0 4px rgba(18,165,150,.11); background:white; }
.primary-button { width:100%; min-height:53px; border:0; margin-top:17px; border-radius:15px; padding:9px 17px; background:linear-gradient(135deg,var(--teal),var(--teal-2)); color:white; display:grid; grid-template-columns:1fr auto; grid-template-rows:auto auto; text-align:left; box-shadow:0 10px 24px rgba(8,127,120,.22); }
.primary-button span { font-weight:800; font-size:14px; }
.primary-button small { grid-column:1; opacity:.72; font-size:10px; }
.primary-button b { grid-column:2; grid-row:1 / 3; align-self:center; font-size:21px; font-weight:400; }
.login-note { margin:15px 0 0; text-align:center; color:var(--muted); display:flex; flex-direction:column; gap:3px; font-size:11px; }
.login-note small { font-size:10px; }
.form-error { background:#fff0f0; color:#a93434; border-radius:10px; padding:10px; font-size:12px; margin:13px 0 0; }
.trust-row { display:flex; align-items:center; gap:7px; margin-top:auto; padding-top:26px; color:#a7cac5; font-size:10px; }
.trust-row i { width:7px; height:7px; border-radius:50%; background:#b8e06f; box-shadow:0 0 0 4px rgba(184,224,111,.12); }
.trust-row em { font-style:normal; opacity:.65; }

.app-view { min-height:100dvh; padding-bottom:91px; }
.topbar { height:67px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; color:white; background:linear-gradient(125deg,#082932,#0d4646); position:sticky; top:0; z-index:20; box-shadow:0 5px 22px rgba(7,37,41,.18); }
.topbar-brand { display:flex; align-items:center; gap:10px; }
.mini-mark { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:#09272d; background:var(--lime); }
.mini-mark svg { width:23px; fill:currentColor; stroke-width:0; }
.topbar-brand div:last-child { display:flex; flex-direction:column; }
.topbar-brand strong { font-size:12px; letter-spacing:.1em; }
.topbar-brand span { font-size:10px; color:#acc8c5; margin-top:2px; }
.live-pill { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:6px 10px; display:grid; grid-template-columns:auto auto; align-items:center; column-gap:6px; }
.live-pill i { width:7px; height:7px; border-radius:50%; background:#70e1ac; box-shadow:0 0 0 4px rgba(112,225,172,.12); grid-row:1 / 3; }
.live-pill span { font-size:9px; font-weight:800; }
.live-pill small { font-size:8px; color:#b6cfcc; }
.app-main { width:min(100%, 760px); margin:auto; }
.panel { display:none; padding:16px 15px 8px; animation:fadeUp .25s ease; }
.panel.active { display:block; }
@keyframes fadeUp { from { opacity:0; transform:translateY(5px); } }
.hero-card { min-height:129px; padding:23px 21px; overflow:hidden; border-radius:22px; color:white; background:linear-gradient(135deg,#0c756f 0%,#0b9486 66%,#25af91); box-shadow:0 16px 35px rgba(10,128,119,.2); position:relative; display:flex; justify-content:space-between; align-items:center; }
.hero-card::before { content:""; position:absolute; width:170px; height:170px; border:1px solid rgba(255,255,255,.14); border-radius:50%; right:-66px; top:-80px; box-shadow:0 0 0 30px rgba(255,255,255,.035),0 0 0 62px rgba(255,255,255,.025); }
.hero-card p { margin:0 0 4px; font-size:11px; color:#bfe7df; }
.hero-card h1 { margin:0 0 5px; font-size:23px; letter-spacing:-.03em; }
.hero-card span { color:#c9eae4; font-size:11px; }
.hero-orbit { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; color:#d9ffab; background:rgba(4,53,54,.18); position:relative; z-index:2; }
.hero-orbit svg { width:32px; }
.section-heading, .list-caption { display:flex; justify-content:space-between; align-items:center; margin:22px 2px 11px; }
.section-heading > div, .list-caption > div { display:flex; flex-direction:column; }
.section-heading span, .list-caption span { font-weight:850; font-size:14px; }
.section-heading small, .list-caption small { color:var(--muted); font-size:10px; margin-top:1px; }
.icon-button { width:34px; height:34px; border-radius:12px; border:1px solid var(--line); background:white; color:var(--teal); font-size:20px; }
.stats-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.usage-focus { margin-top:4px; }
.focus-count { min-width:25px; height:25px; padding:0 7px; border-radius:14px; background:#fff0df; color:#bd692f; display:grid; place-items:center; font-size:10px; }
.focus-actions { display:flex; align-items:center; gap:7px; }
.focus-actions button { border:1px solid var(--line); border-radius:10px; background:white; color:var(--teal); padding:6px 8px; font-size:8px; }
.active-usage-list { display:flex; gap:10px; overflow-x:auto; padding:1px 1px 7px; scroll-snap-type:x mandatory; scrollbar-width:none; }
.active-usage-list::-webkit-scrollbar { display:none; }
.usage-card { flex:0 0 min(88%, 360px); scroll-snap-align:start; background:white; border:1px solid #e0eae7; border-radius:18px; overflow:hidden; box-shadow:0 7px 22px rgba(20,65,65,.06); display:grid; grid-template-columns:92px 1fr; }
.usage-photo { width:92px; height:100%; min-height:126px; object-fit:cover; background:#e8efed; }
.usage-info { padding:12px; min-width:0; }
.usage-info b, .usage-info span, .usage-info small { display:block; }
.usage-info b { font-size:11px; line-height:1.4; max-height:32px; overflow:hidden; }
.usage-info span { margin-top:6px; font-size:9px; color:#355d59; }
.usage-info small { margin-top:2px; color:var(--muted); font-size:8px; }
.return-button { width:100%; border:0; border-radius:10px; margin-top:9px; padding:7px; background:var(--teal); color:white; display:flex; flex-direction:column; align-items:center; font-size:9px; font-weight:800; }
.return-button small { color:white; opacity:.7; font-size:7px; margin:0; }
.usage-empty { width:100%; padding:15px; border:1px dashed #cadbd7; border-radius:15px; color:var(--muted); background:rgba(255,255,255,.55); text-align:center; font-size:9px; }
.photo-preview { width:100%; max-height:210px; object-fit:cover; border-radius:13px; border:1px solid var(--line); margin-top:7px; }
.allocation-editor { display:flex; flex-direction:column; gap:10px; }
.allocation-row { border:1px solid var(--line); border-radius:14px; padding:11px; background:#f8fbfa; display:grid; grid-template-columns:1fr 90px auto; gap:7px; align-items:end; }
.allocation-row label { margin:0; }
.allocation-row .custom-fields { grid-column:1 / 4; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.allocation-remove { width:36px; height:45px; border:1px solid #efd3d3; border-radius:11px; background:#fff8f8; color:var(--danger); }
.allocation-fixed { border-radius:13px; padding:11px; background:#fff2e7; color:#965629; font-size:9px; }
.stat-card { background:white; border:1px solid #e4eeeb; border-radius:17px; padding:15px; box-shadow:0 6px 20px rgba(19,65,66,.055); min-height:100px; position:relative; overflow:hidden; }
.stat-card::after { content:""; width:45px; height:45px; border-radius:50%; position:absolute; right:-13px; top:-12px; background:var(--tone,#dff5ee); }
.stat-card b { display:block; font-size:26px; line-height:1; letter-spacing:-.04em; margin-bottom:10px; color:var(--teal); }
.stat-card span { display:block; font-size:10px; font-weight:800; }
.stat-card small { display:block; color:var(--muted); font-size:9px; margin-top:3px; }
.stat-card.warn b { color:#d87638; }
.stat-card.danger b { color:#cc5555; }
.inventory-toolbar { display:grid; grid-template-columns:1fr auto; gap:9px; margin-top:22px; }
.search-box { position:relative; }
.search-box svg { width:19px; position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#77908d; }
.search-box input { padding-left:43px; height:48px; background:white; box-shadow:0 4px 14px rgba(28,70,70,.05); }
.square-add { width:48px; height:48px; border:0; border-radius:14px; color:white; background:var(--teal); font-size:25px; box-shadow:0 9px 20px rgba(8,127,120,.2); }
.list-caption { margin-top:17px; }
.list-caption b { color:var(--teal); background:#dcefeb; padding:4px 9px; border-radius:20px; font-size:11px; }
.items-list { display:flex; flex-direction:column; gap:10px; }
.load-more { width:100%; margin:13px 0 4px; border:1px solid #cfe1de; border-radius:14px; background:white; color:var(--teal); padding:10px; display:flex; flex-direction:column; align-items:center; font-size:10px; font-weight:800; }
.load-more small { font-size:8px; opacity:.65; }
.item-card { background:white; border:1px solid #e0ebe8; border-radius:18px; box-shadow:0 7px 24px rgba(16,66,65,.055); overflow:hidden; }
.item-card summary { list-style:none; padding:16px; cursor:pointer; }
.item-card summary::-webkit-details-marker { display:none; }
.item-head { display:grid; grid-template-columns:1fr auto; gap:13px; align-items:start; }
.item-name { font-size:14px; line-height:1.45; font-weight:800; color:#15363b; }
.item-primary-id { display:block; color:#295955; font-size:11px; font-weight:750; }
.item-zh-name { display:block; color:var(--ink); font-size:13px; font-weight:800; margin-top:2px; }
.quantity-badge { min-width:58px; padding:8px 9px; border-radius:12px; text-align:right; background:#eaf6f3; color:var(--teal); }
.quantity-badge b { font-size:20px; line-height:1; }
.quantity-badge small { display:block; color:#67847f; max-width:76px; overflow:hidden; text-overflow:ellipsis; font-size:8px; margin-top:3px; }
.item-meta { display:flex; gap:7px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.location-chip { display:inline-flex; flex-direction:column; max-width:100%; padding:5px 9px; border-radius:10px; background:#f1f6f4; color:#365e5c; font-size:9px; }
.location-chip small { color:#7a918f; font-size:8px; }
.pending-chip { background:#fff4e9; color:#b7652d; }
.mismatch-chip { background:#ffeded; color:#b94c4c; }
.expand-hint { margin-left:auto; color:#7c9692; font-size:17px; transition:.2s; }
.item-card[open] .expand-hint { transform:rotate(180deg); }
.item-detail { border-top:1px solid var(--line); padding:0 16px 16px; }
.allocation-line { display:flex; justify-content:space-between; align-items:center; padding:13px 0 9px; color:var(--muted); font-size:10px; }
.allocation-line b { color:var(--ink); font-size:12px; }
.allocation-progress { height:5px; background:#eaf0ee; border-radius:5px; overflow:hidden; margin-bottom:13px; }
.allocation-progress i { display:block; height:100%; max-width:100%; background:linear-gradient(90deg,var(--teal),#56c69d); border-radius:5px; }
.location-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:10px 0; border-top:1px dashed #e4ecea; }
.location-row:first-of-type { border-top:0; }
.location-title span, .location-title small { display:block; }
.location-title span { font-size:11px; font-weight:750; }
.location-title small { color:var(--muted); font-size:9px; margin-top:2px; }
.location-qty { display:flex; align-items:center; gap:7px; }
.location-qty b { min-width:42px; text-align:right; font-size:15px; }
.location-qty b.pending { color:#d47738; font-size:10px; }
.tiny-edit { width:30px; height:30px; border-radius:10px; border:1px solid var(--line); background:#f7faf9; color:var(--teal); }
.item-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:13px; }
.item-actions button { min-height:43px; border-radius:12px; border:1px solid #cfe3df; color:var(--teal); background:#f1f8f6; display:flex; flex-direction:column; justify-content:center; align-items:center; font-size:10px; font-weight:800; }
.item-actions button small { font-size:8px; opacity:.67; }
.item-actions .adjust-button { color:white; border-color:var(--teal); background:var(--teal); }
.item-actions .checkout-button { grid-column:1 / 3; color:white; border-color:#da7c3d; background:linear-gradient(135deg,#e9823d,#f0a052); }
.usage-history-card { border:1px solid var(--line); border-radius:15px; overflow:hidden; margin-bottom:10px; }
.usage-history-photos { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); }
.usage-history-photos img { width:100%; height:135px; object-fit:cover; background:#edf3f1; }
.usage-history-body { padding:11px 12px; }
.usage-history-body b, .usage-history-body span, .usage-history-body small { display:block; }
.usage-history-body b { font-size:11px; }
.usage-history-body span { font-size:9px; color:#355d59; margin-top:4px; }
.usage-history-body small { font-size:8px; color:var(--muted); margin-top:2px; }
.empty-state { text-align:center; padding:42px 20px; background:white; border-radius:18px; color:var(--muted); }
.empty-state b { display:block; font-size:15px; color:var(--ink); margin-bottom:5px; }
.loading-card { height:116px; border-radius:18px; background:linear-gradient(100deg,#fff 20%,#edf3f1 40%,#fff 60%); background-size:200% 100%; animation:shimmer 1.3s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }

.page-title { padding:15px 3px 17px; }
.page-title > span, .page-title > small { display:block; }
.page-title > span, .page-title.with-action span { font-size:20px; font-weight:850; }
.page-title > small, .page-title.with-action small { color:var(--teal); font-weight:700; font-size:12px; }
.page-title p, .page-title em { margin:12px 0 0; color:var(--muted); font-size:11px; font-style:normal; display:block; }
.page-title em { margin-top:2px; font-size:10px; }
.with-action { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.primary-compact { border:0; border-radius:12px; background:var(--teal); color:white; padding:8px 14px; display:flex; flex-direction:column; font-size:10px; font-weight:800; }
.primary-compact small { color:white !important; opacity:.72; font-size:8px !important; }
.timeline { display:flex; flex-direction:column; }
.timeline-item { display:grid; grid-template-columns:auto 1fr; gap:12px; position:relative; padding-bottom:18px; }
.timeline-item::before { content:""; position:absolute; left:15px; top:32px; bottom:0; border-left:1px solid #cfe0dc; }
.timeline-item:last-child::before { display:none; }
.timeline-icon { width:31px; height:31px; border-radius:10px; background:#deefeb; color:var(--teal); display:grid; place-items:center; font-size:13px; z-index:1; }
.timeline-body { background:white; border:1px solid #e1ebe8; border-radius:15px; padding:12px 13px; }
.timeline-body b, .timeline-body span, .timeline-body small, .timeline-body time { display:block; }
.timeline-body b { font-size:11px; }
.timeline-body span { font-size:10px; margin-top:3px; color:#365a59; }
.timeline-body small { font-size:9px; color:var(--muted); margin-top:2px; }
.timeline-body time { font-size:8px; color:#98aaa7; margin-top:7px; }
.people-list { display:flex; flex-direction:column; gap:9px; }
.owner-notice { border-radius:16px; padding:13px 14px; margin-bottom:12px; background:#e2f1ed; color:#235a56; font-size:10px; line-height:1.5; }
.owner-notice small { display:block; color:#577b77; margin-top:2px; }
.owner-notice.denied { background:#fff0e5; color:#a95827; }
.settings-overview { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; margin-bottom:12px; }
.overview-pill { background:white; border:1px solid var(--line); border-radius:14px; padding:11px 12px; }
.overview-pill b, .overview-pill span, .overview-pill small { display:block; }
.overview-pill b { color:var(--teal); font-size:21px; }
.overview-pill span { font-size:9px; font-weight:800; margin-top:4px; }
.overview-pill small { font-size:8px; color:var(--muted); }
.settings-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.settings-grid button { min-height:104px; position:relative; border:1px solid var(--line); border-radius:17px; background:white; color:var(--ink); padding:13px; text-align:left; box-shadow:0 5px 17px rgba(24,66,66,.045); display:flex; flex-direction:column; align-items:flex-start; }
.settings-grid button > b { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:#e2f1ed; color:var(--teal); font-size:16px; margin-bottom:10px; }
.settings-grid button > span { font-size:10px; font-weight:850; }
.settings-grid button > small { font-size:8px; color:var(--muted); margin-top:2px; }
.settings-grid button > em { position:absolute; right:10px; top:10px; min-width:21px; height:21px; padding:0 5px; border-radius:12px; display:grid; place-items:center; background:var(--danger); color:white; font-style:normal; font-size:8px; }
.settings-section { margin-top:18px; padding-top:3px; border-top:1px solid var(--line); scroll-margin-top:80px; }
.settings-locations { display:grid; grid-template-columns:1fr; gap:7px; }
.settings-location-row { background:white; border:1px solid var(--line); border-radius:14px; padding:11px 13px; }
.settings-location-row span, .settings-location-row small { display:block; }
.settings-location-row span { font-size:10px; font-weight:750; }
.settings-location-row small { color:var(--muted); font-size:8px; margin-top:2px; }
.requests-list { display:flex; flex-direction:column; gap:9px; }
.request-card { background:white; border:1px solid var(--line); border-radius:17px; padding:14px; }
.request-card.reviewed { opacity:.68; }
.request-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.request-head b { font-size:12px; line-height:1.4; }
.status-chip { flex:0 0 auto; border-radius:10px; padding:5px 8px; background:#fff0df; color:#b3622b; font-size:8px; }
.status-chip.approved { background:#dff2eb; color:var(--teal); }
.status-chip.rejected { background:#ffe8e8; color:#b74c4c; }
.request-change { margin:11px 0; padding:10px; border-radius:12px; background:#f1f6f4; display:flex; justify-content:center; align-items:center; gap:12px; }
.request-change b { color:var(--teal); font-size:18px; }
.request-change i { color:#829592; font-style:normal; }
.request-reason { font-size:10px; color:#345b58; line-height:1.5; }
.request-reason small { display:block; color:var(--muted); font-size:8px; margin-top:2px; }
.request-meta { color:#91a3a0; font-size:8px; margin-top:9px; }
.request-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:11px; }
.request-actions button { border:1px solid #cfe3df; border-radius:11px; background:#f1f8f6; color:var(--teal); padding:9px; font-size:9px; font-weight:800; }
.request-actions button.reject { border-color:#efd3d3; color:#c05252; background:#fff7f7; }
.person-card { background:white; border:1px solid var(--line); border-radius:17px; padding:14px; display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; }
.person-card.inactive { opacity:.55; }
.person-main b, .person-main span, .person-main small { display:block; }
.person-main b { font-size:13px; }
.person-main span { color:var(--muted); font-size:10px; margin-top:3px; }
.person-main small { color:#90a29f; font-size:8px; }
.person-main .pin-state { display:inline-block; width:max-content; margin-top:6px; padding:4px 7px; border-radius:8px; background:#fff0df; color:#ad642f; }
.person-main .pin-state.ready { background:#e3f2ee; color:var(--teal); }
.role-chip { border:0; border-radius:10px; padding:7px 10px; display:flex; flex-direction:column; align-items:center; font-size:9px; font-weight:800; background:#edf4f2; color:#50716e; }
.role-chip.admin { background:#ddf1ec; color:var(--teal); }
.role-chip small { font-size:7px; opacity:.7; }
.person-actions { grid-column:1 / 3; display:flex; gap:7px; padding-top:9px; border-top:1px dashed var(--line); }
.person-actions button { flex:1; border:1px solid var(--line); background:#f7faf9; color:#51716e; border-radius:10px; padding:7px; font-size:9px; }
.person-actions button.danger { color:var(--danger); }
.pin-intro { border-radius:15px; padding:14px; margin-bottom:4px; background:#e7f4f0; color:#245f5a; }
.pin-intro b, .pin-intro span, .pin-intro small { display:block; }
.pin-intro b { font-size:16px; margin-bottom:7px; }
.pin-intro span { font-size:10px; font-weight:750; }
.pin-intro small { margin-top:3px; font-size:9px; color:#5c7d79; }
.security-card { background:white; border:1px solid var(--line); border-left:4px solid #df994e; border-radius:15px; padding:13px; }
.security-card.severity-critical { border-left-color:var(--danger); }
.security-card.severity-info { border-left-color:var(--teal); }
.security-card.resolved { opacity:.58; }
.security-zh { color:#365a59; font-size:10px; margin-top:5px; }
.resolve-alert { width:100%; margin-top:10px; border:1px solid #cfe3df; border-radius:10px; background:#f1f8f6; color:var(--teal); padding:8px; font-size:9px; font-weight:800; }
.login-event { background:white; border:1px solid var(--line); border-radius:14px; padding:11px 12px; display:grid; grid-template-columns:1fr auto; gap:4px 10px; }
.login-event > div b, .login-event > div small { display:block; }
.login-event > div b { font-size:10px; }
.login-event > div small, .login-event > small { color:var(--muted); font-size:8px; }
.login-event > span { align-self:center; color:#355d59; font-size:9px; }
.login-event > small { grid-column:1 / 3; }
.login-event.failed, .login-event.blocked { border-left:3px solid var(--danger); }
.profile-card { margin-top:10px; padding:27px 20px; background:linear-gradient(140deg,#0a3b42,#0a6d68); color:white; border-radius:22px; text-align:center; }
.avatar { width:68px; height:68px; margin:0 auto 12px; border-radius:22px; background:var(--lime); color:#15352f; display:grid; place-items:center; font-size:25px; font-weight:900; }
.profile-card h2 { margin:0; font-size:21px; }
.profile-card p { margin:5px 0; color:#b9d5d2; font-size:11px; }
.profile-role { display:inline-flex; flex-direction:column; margin-top:10px; padding:6px 13px; border-radius:20px; background:rgba(255,255,255,.11); font-size:9px; }
.profile-role small { opacity:.65; font-size:7px; }
.permission-card { margin-top:11px; padding:14px; background:white; border:1px solid var(--line); border-radius:16px; display:flex; align-items:center; gap:12px; }
.permission-icon { width:37px; height:37px; flex:0 0 auto; border-radius:12px; display:grid; place-items:center; background:#e3f2ee; color:var(--teal); font-weight:900; }
.permission-card span, .permission-card small { display:block; }
.permission-card span { font-size:10px; font-weight:750; }
.permission-card small { color:var(--muted); font-size:9px; margin-top:2px; }
.logout-button { width:100%; margin-top:18px; border:1px solid #efc9c9; border-radius:14px; background:#fff8f8; color:#bd4b4b; padding:11px; display:flex; flex-direction:column; font-size:11px; font-weight:800; }
.logout-button small { font-size:9px; opacity:.7; }
.profile-action-button { width:100%; margin-top:12px; border:1px solid #cfe3df; border-radius:14px; background:#f4faf8; color:var(--teal); padding:11px; display:flex; flex-direction:column; align-items:center; font-size:11px; font-weight:800; }
.profile-action-button small { font-size:9px; opacity:.7; }
.version { text-align:center; color:#9cadaa; font-size:9px; margin:20px; }

.bottom-nav { position:fixed; z-index:30; bottom:0; left:0; right:0; min-height:74px; padding:7px max(10px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); display:flex; justify-content:center; gap:4px; background:rgba(255,255,255,.96); border-top:1px solid #dfe9e7; box-shadow:0 -8px 30px rgba(20,58,60,.08); backdrop-filter:blur(18px); }
.nav-button { flex:1; max-width:140px; border:0; background:transparent; color:#78908d; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:13px; padding:4px; }
.nav-button b { font-size:20px; line-height:1; font-weight:500; }
.nav-button span { font-size:9px; font-weight:800; margin-top:3px; }
.nav-button small { font-size:7px; margin-top:1px; }
.nav-button.active { color:var(--teal); background:#e9f4f1; }
.modal { position:fixed; z-index:100; inset:0; display:flex; align-items:flex-end; justify-content:center; }
.modal-backdrop { position:absolute; inset:0; border:0; background:rgba(4,25,30,.55); backdrop-filter:blur(3px); }
.modal-sheet { position:relative; width:min(100%,620px); max-height:92dvh; background:white; border-radius:25px 25px 0 0; overflow:auto; animation:sheetUp .25s ease; box-shadow:0 -20px 70px rgba(0,0,0,.2); }
@keyframes sheetUp { from { transform:translateY(30px); opacity:.5; } }
.modal-handle { width:38px; height:4px; border-radius:4px; background:#d6e0de; margin:9px auto 3px; }
.modal-sheet header { display:flex; justify-content:space-between; align-items:flex-start; padding:13px 19px 12px; border-bottom:1px solid var(--line); position:sticky; top:0; background:white; z-index:2; }
.modal-sheet header span, .modal-sheet header small { display:block; }
.modal-sheet header span { font-size:16px; font-weight:850; }
.modal-sheet header small { color:var(--muted); font-size:10px; margin-top:2px; }
.modal-sheet header button { width:31px; height:31px; border:0; border-radius:10px; background:#edf3f1; color:#617a77; font-size:21px; }
.modal-body { padding:17px 19px max(25px,env(safe-area-inset-bottom)); }
.form-grid { display:grid; gap:13px; }
.field-help { margin:-5px 1px 0; color:var(--muted); font-size:9px; }
.modal-submit { width:100%; margin-top:5px; padding:12px; border:0; border-radius:13px; background:var(--teal); color:white; display:flex; flex-direction:column; font-weight:800; font-size:11px; }
.modal-submit small { font-size:8px; opacity:.7; }
.danger-link { margin-top:8px; width:100%; border:0; background:transparent; color:var(--danger); padding:8px; font-size:10px; }
.welcome-overlay { position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:22px; background:rgba(4,27,32,.72); backdrop-filter:blur(8px); }
.welcome-dialog { width:min(100%,390px); background:white; border-radius:25px; padding:28px 24px 23px; text-align:center; box-shadow:0 30px 100px rgba(0,0,0,.3); }
.welcome-icon { width:60px; height:60px; margin:auto; border-radius:50%; display:grid; place-items:center; color:#0c7c67; font-size:25px; background:#d9f3e8; }
.welcome-dialog p { color:var(--teal); font-size:12px; margin:17px 0 6px; }
.welcome-dialog h2 { font-size:19px; line-height:1.45; margin:0; }
.toast { position:fixed; z-index:150; left:50%; bottom:96px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 36px); color:white; background:#173b3f; border-radius:13px; padding:10px 14px; box-shadow:var(--shadow); font-size:10px; text-align:center; animation:fadeUp .2s; }

@media (min-width: 800px) {
  .app-view { padding-bottom:20px; }
  .topbar { padding:0 max(28px, calc((100vw - 1120px)/2)); }
  .app-main { width:min(100% - 220px, 900px); margin-left:calc((100vw - min(1120px, 100vw - 40px))/2 + 200px); }
  .panel { padding:25px 25px 30px; }
  .bottom-nav { left:calc((100vw - min(1120px, 100vw - 40px))/2); right:auto; top:91px; bottom:auto; width:180px; min-height:auto; padding:12px; border:1px solid var(--line); border-radius:20px; flex-direction:column; align-items:stretch; gap:7px; box-shadow:var(--shadow); }
  .nav-button { max-width:none; min-height:58px; flex:none; display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; text-align:left; align-items:center; justify-items:start; padding:9px 13px; }
  .nav-button b { grid-row:1 / 3; }
  .nav-button span { font-size:10px; }
  .stats-grid { grid-template-columns:repeat(4,1fr); }
  .items-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .modal { align-items:center; padding:30px; }
  .modal-sheet { border-radius:25px; max-height:88vh; }
}