/* Port of TaleFork's Arco Design Pro layout and visual tokens. The operations
   screens keep their existing API bindings while using the same admin idiom. */
:root { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; color: #1d2129; background: #f2f3f5; font-size: 14px; }
body { background: #f2f3f5; }
.shell { padding-top: 60px; }
.rail { width: 220px; background: #fff; color: #4e5969; padding: 20px 0 0; border-right: 1px solid #e5e6eb; }
.brand { position: fixed; z-index: 10; top: 0; left: 0; right: 0; height: 60px; padding: 0 20px; margin: 0; background: #fff; border-bottom: 1px solid #e5e6eb; color: #1d2129; font-size: 18px; letter-spacing: 0; }
.brand small { display: none; }
.brand-mark { width: 32px; height: 32px; border-radius: 6px; background: #165dff; color: #fff; font-family: inherit; font-size: 16px; font-weight: 700; }
.rail nav { gap: 2px; padding: 0 10px; }
.nav-item { color: #4e5969; border-radius: 3px; padding: 11px 14px; font-size: 14px; font-weight: 400; }
.nav-item:hover, .nav-item:focus-visible { color: #165dff; background: #f2f3f5; }
.nav-item.active { color: #165dff; background: #e8f3ff; font-weight: 500; }
.rail-foot { margin: auto 10px 16px; border-color: #e5e6eb; color: #86909c; padding: 14px 6px 0; }
.text-action { color: #165dff; text-decoration: none; }
.content { max-width: none; width: calc(100% - 220px); padding: 24px 24px 48px; margin: 0; }
.topbar { border: 0; align-items: center; padding: 0; margin: 0 0 20px; }
.topbar h1 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0; }
.topbar-note { font-size: 12px; color: #86909c; }
.eyebrow { color: #86909c; font-size: 11px; letter-spacing: 0; font-weight: 500; }
.intro { align-items: center; margin-bottom: 16px; }
.intro h2 { font-size: 16px; letter-spacing: 0; margin: 0; }
.intro p { margin: 0; max-width: none; }
.metric, .panel, .table-wrap, .login-panel { border: 0; border-radius: 4px; box-shadow: none; }
.metric { padding: 20px; min-height: 134px; }
.metric small { color: #4e5969; font-size: 14px; font-weight: 400; }
.metric strong { font-size: 30px; margin: 18px 0 4px; letter-spacing: 0; font-weight: 600; }
.metric span { font-size: 12px; }
.panel { padding: 20px; }
.panel h3 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.panel p, .intro p, .section-head p { color: #86909c; font-size: 13px; }
.section-head { margin: 0 0 16px; }
.section-head h2 { font-size: 16px; letter-spacing: 0; margin: 0 0 8px; }
.section-head .eyebrow { display: none; }
.toolbar { background: #fff; padding: 20px; margin: 0; align-items: center; gap: 16px; flex-wrap: wrap; }
.toolbar label { color: #4e5969; font-size: 14px; font-weight: 400; }
.toolbar input, .toolbar select, input, select, textarea { border: 1px solid #c9cdd4; border-radius: 2px; color: #1d2129; padding: 8px 12px; min-height: 32px; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: #165dff; box-shadow: 0 0 0 2px #165dff22; }
.primary, .secondary, .danger { min-height: 32px; padding: 6px 15px; border-radius: 2px; font-size: 14px; font-weight: 400; }
.primary { background: #165dff; }
.primary:hover { background: #4080ff; }
.secondary { background: #f2f3f5; color: #4e5969; }
.secondary:hover { background: #e5e6eb; }
.danger { background: #f53f3f; }
.table-wrap { border-radius: 0 0 4px 4px; }
th { background: #f7f8fa; color: #4e5969; font-size: 13px; letter-spacing: 0; padding: 12px 16px; font-weight: 500; }
td { border-color: #e5e6eb; padding: 12px 16px; font-size: 13px; }
tr:hover td { background: #f7f8fa; }
.pill { border-radius: 2px; font-weight: 500; }
.table-action { color: #165dff; text-decoration: none; }
.pager { background: #fff; padding: 14px 20px; border-top: 1px solid #e5e6eb; }
.login-panel { max-width: 420px; padding: 32px; border: 1px solid #e5e6eb; }
.login-panel h2 { font-size: 20px; }
.message { border-radius: 2px; }
dialog { border-radius: 4px; }
.plan-card { border-radius: 4px; background: #fff; }
.route-options label { border-radius: 3px; background: #fff; }
.route-options label:has(input:checked) { border-color: #165dff; background: #e8f3ff; }
.price-preview { border-radius: 2px; }
body.signed-out .rail { display: none; }
body.signed-out .content { width: 100%; min-height: calc(100vh - 60px); }
body.signed-out .topbar { display: none; }
body.signed-out .login-panel { margin: max(8vh, 40px) auto; }
.rail nav[hidden], .rail-foot[hidden], #signout[hidden] { display: none !important; }
@media (max-width: 900px) { .rail { width: 180px; } .content { width: calc(100% - 180px); } }
@media (max-width: 640px) { .shell { display: block; } .rail { width: 100%; padding: 0; } .rail nav { overflow-x: auto; white-space: nowrap; } .content { width: 100%; padding: 20px 12px 36px; } .brand { height: 60px; } .topbar-note { display: none; } .metrics { grid-template-columns: repeat(2, 1fr); } }