/* Hostnali App — app shell. App-mode rules are scoped to html.hnapp-standalone. */
:root{--hn-ink:#0F1B2D;--hn-mut:#5A6577;--hn-line:#E2E8F0;--hn-card:#fff;--hn-soft:#EEF3FB;--hn-ok:#1F7A3A;--hn-okbg:#E6F4EA;--hn-warn:#B23B07;--hn-warnbg:#FDEEE4;--hn-top:56px;--hn-navh:64px;--hn-sat:env(safe-area-inset-top,0px);--hn-sab:env(safe-area-inset-bottom,0px)}

/* ---------- Shell pieces: hidden unless app mode ---------- */
.hn-topbar,.hn-nav{display:none}
.hn-sheet[hidden],[data-hn-install][hidden],.hn-ios-steps[hidden],.hn-ios-more[hidden]{display:none!important}
.hn-ico{flex:none;display:inline-block;vertical-align:middle}
.hn-standalone-only{display:none!important}
html.hnapp-standalone .hn-standalone-only{display:flex!important}
html.hnapp-standalone .hn-browser-only{display:none!important}

html.hnapp-standalone body{background:var(--hn-bg)!important;padding-top:0;padding-bottom:calc(var(--hn-navh) + var(--hn-sab));font-family:var(--hn-font);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}
html.hnapp-standalone.hnapp-topbar body{padding-top:calc(var(--hn-top) + var(--hn-sat))}
html.hnapp-standalone #main-body{padding-top:12px;padding-bottom:16px;background:transparent}

/* Top bar */
html.hnapp-standalone.hnapp-topbar .hn-topbar{display:block;position:fixed;top:0;left:0;right:0;z-index:1030;background:var(--hn-card);border-bottom:1px solid var(--hn-line);padding-top:var(--hn-sat)}
.hn-topbar-in{height:var(--hn-top);display:flex;align-items:center;gap:6px;padding:0 8px 0 12px;max-width:960px;margin:0 auto}
.hn-brand{display:flex;align-items:center;gap:10px;color:var(--hn-ink)!important;text-decoration:none!important;font-weight:800;font-size:18px;letter-spacing:-.2px;flex:1;min-width:0}
.hn-brand img{border-radius:9px}
.hn-brand span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn-title{display:none;flex:1;min-width:0;font-weight:700;font-size:17px;color:var(--hn-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hn-back{display:none!important}
.hn-shell[data-root="0"] .hn-back{display:inline-flex!important}
.hn-shell[data-root="0"] .hn-brand{display:none}
.hn-shell[data-root="0"] .hn-title{display:block}
.hn-icon-btn{position:relative;width:44px;height:44px;border:0;background:none;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;color:var(--hn-ink);cursor:pointer;flex:none;padding:0}
.hn-icon-btn:active{background:var(--hn-soft)}
.hn-badge{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#D9480F;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;font-family:var(--hn-font,system-ui)}

/* Bottom navigation */
html.hnapp-standalone .hn-nav{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:1030;background:var(--hn-card);border-top:1px solid var(--hn-line);padding-bottom:var(--hn-sab);height:calc(var(--hn-navh) + var(--hn-sab))}
.hn-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--hn-mut)!important;text-decoration:none!important;font-size:11px;font-weight:600;font-family:var(--hn-font)}
.hn-nav a.is-active{color:var(--hn-primary)!important;font-weight:700}
.hn-nav-ico{position:relative;display:flex}
.hn-nav .hn-badge{top:-6px;right:-12px}

/* Progress bar shown while the next page loads */
.hn-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--hn-accent);z-index:1050;transition:width .3s ease;pointer-events:none}
.hn-pull{position:fixed;top:calc(var(--hn-top) + var(--hn-sat));left:50%;transform:translate(-50%,-60px);z-index:1029;width:40px;height:40px;border-radius:20px;background:var(--hn-card);box-shadow:0 2px 8px rgba(15,27,45,.18);display:flex;align-items:center;justify-content:center;color:var(--hn-primary);transition:transform .15s}

/* Sheets */
.hn-sheet{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-end;justify-content:center}
.hn-sheet-bg{position:absolute;inset:0;background:rgba(15,27,45,.45)}
.hn-sheet-panel{position:relative;width:100%;max-width:520px;max-height:80vh;overflow:auto;background:var(--hn-card);border-radius:24px 24px 0 0;padding:16px 20px calc(20px + var(--hn-sab));font-family:var(--hn-font);color:var(--hn-ink);animation:hn-up .2s ease-out}
@keyframes hn-up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.hn-sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.hn-sheet-head strong{font-size:18px}
.hn-empty{display:flex;gap:10px;align-items:center;color:var(--hn-ok);font-weight:600;padding:16px 0;margin:0}
.hn-install-head{display:flex;gap:14px;align-items:flex-start;margin:6px 0 14px}
.hn-install-head img{border-radius:12px}
.hn-install-head strong{font-size:17px;display:block}
.hn-install-head p{margin:4px 0 0;color:var(--hn-mut);font-size:14px;line-height:1.45}
.hn-ios-steps{background:var(--hn-soft);border-radius:14px;padding:12px 14px;font-size:14px;margin-bottom:12px}
.hn-ios-steps p{margin:0}
.hn-sheet-actions{display:flex;flex-direction:column;gap:8px}
@media (min-width:768px){.hn-sheet{align-items:center}.hn-sheet-panel{border-radius:24px}}

/* ---------- Shared components (app pages, both modes) ---------- */
.hnapp-wrap{font-family:var(--hn-font);color:var(--hn-ink)}
.hn-page{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.hn-card{background:var(--hn-card);border:1px solid var(--hn-line);border-radius:18px}
.hn-muted{color:var(--hn-mut)}
.hn-btn,a.hn-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border-radius:14px;border:0;background:var(--hn-primary);color:#fff!important;font-weight:700;font-size:15px;text-decoration:none!important;cursor:pointer;font-family:var(--hn-font)}
.hn-btn:hover{filter:brightness(.95)}
.hn-btn-soft,a.hn-btn-soft{background:var(--hn-soft);color:var(--hn-primary)!important}
.hn-btn-ghost,a.hn-btn-ghost{background:transparent;color:var(--hn-mut)!important}
.hn-btn-light,a.hn-btn-light{background:#fff;color:var(--hn-ink)!important;align-self:flex-start}
.hn-btn-pay,a.hn-btn-pay{background:var(--hn-ok);flex:1}
.hn-btn-block{width:100%}
.hn-section h2,html.hnapp-rs-general #main-body .hnapp-wrap .hn-section h2{font-size:15px;font-weight:700;letter-spacing:0;margin:0 0 10px;color:var(--hn-ink)}
.hn-greet h1{font-size:24px;font-weight:800;letter-spacing:-.4px;margin:0;color:var(--hn-ink)}
.hn-greet p{margin:2px 0 0;color:var(--hn-mut);font-size:13px}

.hn-due{padding:16px;display:flex;flex-direction:column;gap:12px}
.hn-due-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.hn-due-top>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.hn-due-top strong{font-size:15px}
.hn-due-top .hn-muted{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hn-due-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--hn-mut)}
.hn-due.is-soon .hn-due-label{color:var(--hn-warn)}
.hn-due.is-overdue{border-color:#F3C5AC}
.hn-due.is-overdue .hn-due-label{color:var(--hn-warn)}
.hn-due-amt{font-size:20px;font-weight:800;white-space:nowrap}
.hn-due-actions{display:flex;gap:10px}
.hn-due-actions .hn-btn-soft{width:92px}
.hn-due-ok{flex-direction:row;align-items:center;gap:12px;color:var(--hn-ok)}
.hn-due-ok div{display:flex;flex-direction:column}
.hn-due-ok strong{color:var(--hn-ink)}
.hn-due-ok span{color:var(--hn-mut);font-size:13px}

.hn-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
a.hn-stat{padding:14px;color:var(--hn-ink)!important;text-decoration:none!important;display:flex;flex-direction:column}
.hn-stat span{font-size:12px;color:var(--hn-mut);font-weight:600}
.hn-stat strong{font-size:26px;font-weight:800;margin-top:2px}

.hn-quick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hn-quick a{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--hn-ink)!important;text-decoration:none!important;font-size:11px;font-weight:600;text-align:center;line-height:1.25}
.hn-quick-ico{width:52px;height:52px;border-radius:16px;background:#E3F5FC;color:#0E6C93;display:flex;align-items:center;justify-content:center}

.hn-banner{background:var(--hn-primary);color:#fff;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:8px}
.hn-banner strong{font-size:16px}
.hn-banner p{margin:0;font-size:14px;opacity:.92;line-height:1.45}

.hn-list{padding:0 16px}
.hn-list a{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #EEF1F5;color:var(--hn-ink)!important;text-decoration:none!important}
.hn-list a:last-child{border-bottom:0}
.hn-list a>.hn-ico:last-child{color:#94A3B8}
.hn-list-text{flex:1;min-width:0;display:flex;flex-direction:column}
.hn-list-text strong{font-size:14px;font-weight:600}
.hn-list-text span{font-size:12px;color:var(--hn-mut)}
.hn-list-ico{width:36px;height:36px;border-radius:10px;background:var(--hn-soft);color:var(--hn-primary);display:flex;align-items:center;justify-content:center;flex:none}
.hn-dot{width:8px;height:8px;border-radius:4px;flex:none;background:#94A3B8}
.hn-dot.is-ok,.hn-dot.is-success{background:var(--hn-ok)}
.hn-dot.is-info{background:var(--hn-primary)}
.hn-dot.is-warning{background:#D97706}
.hn-dot.is-danger{background:#D9480F}
.hn-sheet .hn-list{padding:0}

.hn-profile{display:flex;align-items:center;gap:14px}
.hn-avatar{width:56px;height:56px;border-radius:28px;background:#E3F5FC;color:#0E6C93;font-weight:800;font-size:20px;display:flex;align-items:center;justify-content:center;flex:none}
.hn-profile div{display:flex;flex-direction:column;min-width:0}
.hn-profile strong{font-size:20px;font-weight:800}
.hn-profile span{color:var(--hn-mut);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.hn-signout{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--hn-warn)!important;font-weight:700;padding:12px;text-decoration:none!important}

.hn-install-hero{display:flex;gap:14px;align-items:center;background:var(--hn-ink);color:#fff;border-radius:20px;padding:18px}
.hn-install-hero img{border-radius:14px}
.hn-install-hero strong{font-size:18px}
.hn-install-hero p{margin:4px 0 0;color:#DCE3EC;font-size:14px;line-height:1.45}
.hn-installed{align-items:center;gap:10px;background:var(--hn-okbg);color:var(--hn-ok);border-radius:14px;padding:12px 14px;font-weight:600}
.hn-steps{padding:16px}
.hn-steps h2{font-size:15px;margin:0 0 8px}
.hn-steps ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px}
.hn-steps .hn-ico{color:var(--hn-primary)}

/* ---------- WHMCS pages in app mode ---------- */
/* General polish */
html.hnapp-rs-general #main-body>.container{padding-left:16px;padding-right:16px}
html.hnapp-rs-general #main-body .card{border-radius:18px;border-color:var(--hn-line);overflow:hidden}
html.hnapp-rs-general #main-body .btn{border-radius:12px;min-height:44px}
html.hnapp-rs-general #main-body .btn-sm{min-height:36px}
html.hnapp-rs-general #main-body .form-control,html.hnapp-rs-general #main-body .custom-select{border-radius:12px;min-height:46px;font-size:16px}
html.hnapp-rs-general #main-body h1,html.hnapp-rs-general #main-body .h1{font-size:24px;font-weight:800;letter-spacing:-.3px}
html.hnapp-rs-general #main-body h2,html.hnapp-rs-general #main-body .h2{font-size:20px;font-weight:700}
html.hnapp-rs-general #main-body .label.status{border-radius:10px;padding:4px 10px;font-size:11px}
html.hnapp-rs-general .dataTables_wrapper .dataTables_length{display:none}
html.hnapp-rs-general .dataTables_wrapper .dataTables_filter input{width:100%!important;margin-left:0!important}
html.hnapp-rs-general .dataTables_wrapper .dataTables_filter label{width:100%}

/* Sidebar after the content */
html.hnapp-rs-sidebar #main-body>.container>.row{display:flex;flex-wrap:wrap}
html.hnapp-rs-sidebar #main-body>.container>.row>.col-lg-4{order:2}
html.hnapp-rs-sidebar #main-body>.container>.row>.primary-content{order:1}
html.hnapp-rs-sidebar #main-body>.container>.row>.sidebar-secondary{order:3}

/* List tables as cards */
html.hnapp-rs-lists table.table-list,html.hnapp-rs-lists table.table-list tbody{display:block;width:100%!important;border:0;background:transparent}
html.hnapp-rs-lists table.table-list thead{display:none}
html.hnapp-rs-lists table.table-list tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;background:var(--hn-card);border:1px solid var(--hn-line);border-radius:16px;padding:14px 16px;margin-bottom:10px;cursor:pointer}
html.hnapp-rs-lists table.table-list tbody td{display:block;border:0!important;padding:0!important;text-align:left!important;background:transparent!important;font-size:14px;color:var(--hn-ink)}
html.hnapp-rs-lists table.table-list tbody td.dataTables_empty{flex:1;text-align:center!important;color:var(--hn-mut)}
html.hnapp-rs-lists table.table-list tbody td[data-hn-label]::before{content:attr(data-hn-label) " ";color:var(--hn-mut);font-size:12px;font-weight:600}
html.hnapp-rs-lists table.table-list tbody td.hn-cell-main{flex:1 1 60%;min-width:0;font-weight:700}
html.hnapp-rs-lists table.table-list tbody td.hn-cell-main::before{display:none}
html.hnapp-rs-lists table.table-list tbody td.hn-cell-status{margin-left:auto}
html.hnapp-rs-lists table.table-list tbody td.hn-cell-status::before{display:none}
html.hnapp-rs-lists table.table-list tbody td.hn-cell-line{flex:1 1 100%}
html.hnapp-rs-lists table.table-list tbody td.hn-cell-hide{display:none!important}
html.hnapp-rs-lists table.table-list tbody td .w-hidden{display:none}
html.hnapp-rs-lists .table-container,html.hnapp-rs-lists .table-responsive{border:0;overflow:visible;background:transparent}

/* Login */
html.hnapp-rs-login.hnapp-page-login #main-body .login-form{max-width:420px;margin:12px auto 0}
html.hnapp-rs-login.hnapp-page-login #main-body .card{border-radius:24px}
html.hnapp-rs-login.hnapp-page-login .hn-nav{display:none}
html.hnapp-rs-login.hnapp-page-login body{padding-bottom:var(--hn-sab)}

/* Preview banner (desktop testing with ?hnapp_preview=1) */
html.hnapp-preview body::after{content:"App preview";position:fixed;left:8px;top:calc(var(--hn-top) + 8px);z-index:1040;background:#D9480F;color:#fff;font:700 11px/1 system-ui;padding:5px 8px;border-radius:8px;pointer-events:none}
@media (min-width:700px){html.hnapp-preview body{max-width:430px;margin:0 auto!important;box-shadow:0 0 0 1px var(--hn-line)}html.hnapp-preview .hn-topbar,html.hnapp-preview .hn-nav{max-width:430px;margin:0 auto}}

/* ---------- Branded sign-in screen (app mode) ---------- */
.hn-welcome[hidden]{display:none!important}
html.hnapp-welcome body{padding:0!important;background:var(--hn-bg)!important}
html.hnapp-welcome #main-body,html.hnapp-welcome .hn-topbar,html.hnapp-welcome .hn-nav{display:none!important}
.hn-welcome{min-height:100vh;display:flex;flex-direction:column;font-family:var(--hn-font);color:var(--hn-ink)}
.hn-welcome-hero{background:linear-gradient(160deg,var(--hn-primary) 0%,#173E82 100%);color:#fff;text-align:center;padding:calc(56px + var(--hn-sat)) 24px 72px;display:flex;flex-direction:column;align-items:center;gap:10px}
.hn-welcome-hero img{border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.hn-welcome-hero h1{font-size:26px;font-weight:800;letter-spacing:-.4px;margin:10px 0 0;color:#fff}
.hn-welcome-hero p{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.88);max-width:320px}
.hn-welcome-card{background:var(--hn-card);border-radius:24px;margin:-40px 16px 0;padding:8px 4px;box-shadow:0 10px 30px rgba(15,27,45,.10);position:relative}
.hn-welcome-card .card{border:0!important;box-shadow:none!important;margin:0!important;max-width:none!important;background:transparent}
.hn-welcome-card .card-body{padding:16px 16px 8px!important}
.hn-welcome-card .card-body>.mb-4:first-child{display:none}
.hn-welcome-card .form-control-label,.hn-welcome-card label{font-weight:600;font-size:13px;color:var(--hn-ink)}
.hn-welcome-card .input-group-text{border-radius:12px 0 0 12px;background:var(--hn-soft);border-color:#CBD5E1;color:var(--hn-mut)}
.hn-welcome-card .form-control{height:50px;font-size:16px;border-color:#CBD5E1}
.hn-welcome-card .input-group-append .btn{border-radius:0 12px 12px 0;border-color:#CBD5E1;height:50px}
.hn-welcome-card .input-group>.form-control:last-child{border-radius:0 12px 12px 0}
.hn-welcome-card .float-left{float:none!important}
.hn-welcome-card #login,.hn-welcome-card button[type=submit]{width:100%;height:52px;border-radius:16px;font-weight:800;font-size:16px;background:var(--hn-primary);border-color:var(--hn-primary)}
.hn-welcome-card .text-right{text-align:left!important;margin-top:12px}
.hn-welcome-card .text-right label{display:flex;gap:8px;align-items:center;font-weight:500;padding-left:20px}
.hn-welcome-card .card-footer{background:transparent;border:0;text-align:center;padding:4px 16px 16px!important}
.hn-welcome.hn-no-register .card-footer{display:none}
.hn-welcome-card .alert{border-radius:12px;font-size:14px}
.hn-welcome-help{display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 16px calc(24px + var(--hn-sab));color:var(--hn-mut)!important;font-weight:600;font-size:14px;text-decoration:none!important}

/* ---------- Notifications ---------- */
.hn-push-ask{display:flex;gap:12px;padding:16px;align-items:flex-start}
.hn-push-ask[hidden]{display:none}
.hn-push-ask strong{font-size:15px}
.hn-push-ask p{margin:4px 0 10px;color:var(--hn-mut);font-size:13px;line-height:1.45}
.hn-push-ask-actions{display:flex;gap:8px}
.hn-push-ask-actions .hn-btn{min-height:40px;padding:0 14px;font-size:14px}
.hn-push-status{display:flex;gap:12px;align-items:flex-start;padding:16px}
.hn-push-status strong{font-size:15px}
.hn-push-status p{margin:4px 0 0;color:var(--hn-mut);font-size:13px;line-height:1.45}
.hn-push-status[data-state="on"] .hn-list-ico{background:var(--hn-okbg);color:var(--hn-ok)}
.hn-push-status[data-state="denied"] .hn-list-ico,.hn-push-status[data-state="unsupported"] .hn-list-ico{background:var(--hn-warnbg);color:var(--hn-warn)}
.hn-toggles{padding:0 16px}
.hn-toggle{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #EEF1F5;margin:0;font-weight:600;font-size:14px;cursor:pointer}
.hn-toggle:last-child{border-bottom:0}
.hn-switch{position:relative;width:46px;height:28px;flex:none}
.hn-switch input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer;z-index:1}
.hn-switch span{position:absolute;inset:0;border-radius:14px;background:#CBD5E1;transition:background .15s}
.hn-switch span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:11px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s}
.hn-switch input:checked+span{background:var(--hn-ok)}
.hn-switch input:checked+span::after{transform:translateX(18px)}
.hn-switch input:focus-visible+span{outline:2px solid var(--hn-primary);outline-offset:2px}
.hn-hint{display:flex;align-items:center;gap:6px;color:var(--hn-ok);font-size:13px;font-weight:600;margin:8px 0 0}
.hn-hint[hidden]{display:none}
.hn-push-msg{color:var(--hn-mut);min-height:1em}
.hn-push-actions{display:flex;flex-direction:column;gap:8px}
.hn-push-actions[hidden],[data-hn-push-enable][hidden],[data-hn-push-install][hidden]{display:none!important}
.hn-device{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #EEF1F5}
.hn-device:last-child{border-bottom:0}
.hn-device em{font-style:normal;color:var(--hn-ok);font-weight:600}
.hn-btn-sm,a.hn-btn-sm{min-height:36px;padding:0 10px;font-size:13px}

/* ---------- No sidebars in the app ---------- */
html.hnapp-rs-nosidebar #main-body .sidebar,html.hnapp-rs-nosidebar #main-body .sidebar-secondary,html.hnapp-rs-nosidebar #main-body>.container>.row>.col-lg-4{display:none!important}
html.hnapp-rs-nosidebar #main-body>.container>.row>.primary-content{flex:0 0 100%;max-width:100%}

/* ---------- App pages: services and domains ---------- */
.hn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hn-row-between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.hn-row-between h2{margin:0 0 10px}
.hn-link,a.hn-link{display:inline-flex;align-items:center;gap:2px;color:var(--hn-primary)!important;font-weight:700;font-size:14px;text-decoration:none!important}
.hn-pill{display:inline-flex;align-items:center;flex:none;font-size:11px;font-weight:700;padding:4px 10px;border-radius:10px;white-space:nowrap}
.hn-pill-ok{background:var(--hn-okbg);color:var(--hn-ok)}
.hn-pill-warn{background:var(--hn-warnbg);color:var(--hn-warn)}
.hn-pill-info{background:var(--hn-soft);color:var(--hn-primary)}
.hn-pill-muted{background:#EEF1F5;color:var(--hn-mut)}
.hn-chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.hn-chip{flex:none;height:36px;padding:0 14px;border-radius:18px;border:1px solid #CBD5E1;background:var(--hn-card);color:var(--hn-ink);font-weight:600;font-size:13px;font-family:var(--hn-font);cursor:pointer}
.hn-chip span{color:var(--hn-mut);font-weight:600}
.hn-chip.is-on{background:var(--hn-ink);border-color:var(--hn-ink);color:#fff}
.hn-chip.is-on span{color:#B6C2D3}
a.hn-item{display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--hn-ink)!important;text-decoration:none!important}
a.hn-item[hidden]{display:none}
.hn-item .hn-list-text span{display:block}
.hn-item .hn-list-text .is-soon,.hn-head .is-soon{color:var(--hn-warn);font-weight:600}
.hn-search{display:flex;gap:8px;padding:8px}
.hn-search input{flex:1;min-width:0;height:46px;border:0;background:transparent;font-size:16px;padding:0 8px;color:var(--hn-ink);font-family:var(--hn-font)}
.hn-search input:focus{outline:none}
.hn-search:focus-within{border-color:var(--hn-primary)}
.hn-search .hn-btn{width:46px;min-height:46px;padding:0}
.hn-head{display:flex;align-items:center;gap:12px;padding:16px}
.hn-head>div{flex:1;min-width:0;display:flex;flex-direction:column}
.hn-head strong{font-size:18px;font-weight:800;letter-spacing:-.2px;word-break:break-word}
.hn-head span{color:var(--hn-mut);font-size:13px}
.hn-head-ico{width:48px;height:48px;border-radius:14px;background:#E3F5FC;color:#0E6C93;display:flex;align-items:center;justify-content:center;flex:none}
a.hn-alert-card{display:flex;align-items:center;gap:12px;padding:14px 16px;border-color:#F3C5AC;background:#FFF8F3;color:var(--hn-warn)!important;text-decoration:none!important}
.hn-alert-card>span{flex:1;display:flex;flex-direction:column}
.hn-alert-card strong{color:var(--hn-ink)}
.hn-alert-card span span{color:var(--hn-mut);font-size:13px}
.hn-quick-wrap{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px}
.hn-usage{padding:14px 16px;display:flex;flex-direction:column;gap:14px}
.hn-meter .hn-row-between{font-size:13px;color:var(--hn-mut);margin-bottom:6px}
.hn-meter .hn-row-between span:first-child{color:var(--hn-ink);font-weight:600}
.hn-bar{height:8px;border-radius:4px;background:#EEF1F5;overflow:hidden}
.hn-bar span{display:block;height:100%;background:var(--hn-primary);border-radius:4px}
.hn-bar span.is-high{background:#D9480F}
.hn-dl{margin:0;padding:0 16px}
.hn-dl div{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #EEF1F5;font-size:14px}
.hn-dl div:last-child{border-bottom:0}
.hn-dl dt{color:var(--hn-mut);font-weight:500}
.hn-dl dd{margin:0;font-weight:600;text-align:right;word-break:break-all}
.hn-hosting{padding:16px;display:flex;flex-direction:column;gap:12px}
.hn-hosting>div:first-child{display:flex;flex-direction:column}
.hn-hosting .hn-muted{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.hn-hosting strong{font-size:15px}
.hn-hosting-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:8px}
.hn-ns{padding:4px 16px}
.hn-ns p{margin:10px 0}
.hn-ns-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid #EEF1F5;font-size:14px}
.hn-ns-row:last-child{border-bottom:0}
.hn-ns-row span{color:var(--hn-mut);font-weight:600;width:36px;flex:none}
.hn-list a.is-danger{color:var(--hn-warn)!important}
.hn-list a.is-danger .hn-list-ico{background:var(--hn-warnbg);color:var(--hn-warn)}
.hn-empty-card{padding:24px 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.hn-empty-card p{margin:0;color:var(--hn-mut)}
.hn-sheet-sub{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--hn-mut);margin:14px 0 2px}
.hn-inbox a.is-unread .hn-list-text strong{font-weight:800}
.hn-inbox .hn-list-text span{white-space:normal}