@charset "UTF-8";
:root {color-scheme:dark; font-family:Inter, "Segoe UI", system-ui,-apple-system,BlinkMacSystemFont,sans-serif; font-synthesis:none; -webkit-tap-highlight-color:transparent;
  --bg:#0b0b0d; --bg2:#101013; --panel:#151518; --card:#1c1b1e; --card2:#202024; --inset:#131316; --line:#333035; --line-soft:#29272a;
  --text:#f9f5ef; --muted:#979396; --dim:#6e6b6e; --accent:#d6af7c; --accent2:#f0d8b1; --accent-glow:rgba(217,176,126,.16);
  --glass:rgba(21,21,24,.9); --hero-grad:linear-gradient(115deg, #25201c 0%,#191719 46%,#111114 100%); --shadow:0 24px 80px rgba(0,0,0,.3);
  --success:#58bd89; --warning:#e7b45c; --blue:#819cba; --error:#e88986;
}
html[data-theme="white"] {color-scheme:light;
  --bg:#f6f4f1; --bg2:#f0ede9; --panel:#fffcf8; --card:#fff; --card2:#f6f3ee; --inset:#f3f0ec; --line:#e3ded7; --line-soft:#ede7df;
  --text:#23201e; --muted:#77706b; --dim:#958c84; --accent:#a57947; --accent2:#8a5f35; --accent-glow:rgba(176,120,61,.13);
  --glass:rgba(255,252,248,.94); --hero-grad:linear-gradient(115deg,#f2e4d5 0%,#fffaf4 53%,#efeae4 100%); --shadow:0 22px 54px rgba(59,37,17,.09);
  --success:#2a895b; --warning:#a4762b; --blue:#426987; --error:#b84040;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.5;transition:background .45s,color .3s}
[hidden]{display:none!important}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button, input {-webkit-appearance:none; appearance:none}
svg.icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8;flex:none}
.svg-sprite{position:absolute;pointer-events:none}
.ambient{position:fixed;z-index:-1;pointer-events:none;filter:blur(80px);opacity:.7;transition:opacity .3s}
.ambient-one{width:480px;height:480px;left:-250px;top:90px;background:radial-gradient(circle,rgba(147,97,55,.14),transparent 70%)}
.ambient-two{width:480px;height:480px;right:-270px;top:350px;background:radial-gradient(circle,rgba(130,114,96,.1),transparent 70%)}
.site-wrap{max-width:1200px;margin:0 auto;padding:0 28px;position:relative}
.header{height:98px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line-soft);gap:16px}
.identity{display:flex;align-items:center;gap:13px}
.mark{width:43px;height:43px;border:1px solid rgba(215,173,118,.55);border-radius:13px;background:linear-gradient(145deg,rgba(214,175,124,.19),rgba(214,175,124,.035));display:grid;place-items:center;font-weight:900;font-size:26px;letter-spacing:-3px;position:relative;padding-right:3px;font-family:Georgia,serif;color:var(--accent2);box-shadow:inset 0 0 15px rgba(215,173,118,.04)}
.mark-point{position:absolute;right:8px;bottom:8px;width:4px;height:4px;background:var(--accent);border-radius:50%}
.wordmark{font-weight:820;letter-spacing:.11em;font-size:19px;line-height:1.15}
.wordmark-dot{color:var(--accent)}.brand-caption{font-size:9px;color:var(--muted);letter-spacing:.27em;margin-top:5px;font-weight:700}
.header-actions{display:flex;align-items:center;gap:12px}
.read-only-badge{display:flex;align-items:center;gap:8px;color:var(--accent2);font-size:10px;font-weight:800;letter-spacing:.15em;border:1px solid rgba(218,170,109,.23);border-radius:999px;padding:9px 13px;background:var(--accent-glow)}
.read-only-badge .icon{width:13px;height:13px}
.icon-button{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);color:var(--text);background:var(--card);transition:transform .2s,border-color .2s,background .2s}
.icon-button:hover{transform:translateY(-2px);border-color:var(--accent)}
.theme-control{width:43px;height:43px}
.overline,.section-eyebrow,.dialog-eyebrow{font-size:11px;letter-spacing:.19em;font-weight:800;color:var(--accent);display:flex;gap:9px;align-items:center}
.pulse-point{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-glow)}
h1,h2,h3,p{margin-top:0}h1{font-weight:740;letter-spacing:-.058em;line-height:1.12}h1 em{font-style:normal;color:var(--accent);font-family:Georgia,serif;font-weight:600;letter-spacing:-.04em}
.auth-layout{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:7%;padding:110px 0 100px;min-height:calc(100vh - 98px)}
.auth-feature h1{font-size:clamp(42px,5.3vw,72px);margin:30px 0 25px}
.auth-feature>p{max-width:470px;color:var(--muted);font-size:16px;line-height:1.8}
.feature-row{display:flex;gap:28px;flex-wrap:wrap;margin-top:51px;color:var(--muted);font-weight:800;font-size:11px;letter-spacing:.12em}
.accent-lines{display:flex;gap:5px;margin-top:18px}.accent-lines span{height:3px;background:var(--accent);width:53px;border-radius:4px;opacity:.76}.accent-lines span:nth-child(2){width:24px;opacity:.4}.accent-lines span:nth-child(3){width:11px;opacity:.22}
.auth-card{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);padding:42px 38px 34px;border-radius:25px;box-shadow:var(--shadow)}
.auth-card-glow{position:absolute;width:280px;height:200px;right:-190px;top:-120px;background:var(--accent-glow);filter:blur(35px);pointer-events:none}
.auth-caption{display:flex;gap:8px;align-items:center;font-size:10px;font-weight:800;letter-spacing:.15em;color:var(--accent)}.auth-caption .icon{width:15px;height:15px}
.auth-card h2{font-size:31px;letter-spacing:-.035em;margin:24px 0 8px}.auth-card>p{font-size:14px;color:var(--muted);line-height:1.7;max-width:310px}
.login-form{margin-top:31px;display:flex;flex-direction:column;gap:9px}.login-form label{font-size:12px;font-weight:750;color:var(--text)}
.login-form input{height:51px;border-radius:12px;border:1px solid var(--line);outline:none;background:var(--inset);color:var(--text);padding:0 14px;width:100%;font-size:15px;transition:border-color .2s,box-shadow .2s}
.login-form input::placeholder{color:var(--dim)}.login-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}.password-wrap{position:relative}.password-wrap input{padding-right:85px}
.show-password{position:absolute;right:8px;top:8px;height:35px;padding:0 8px;border:0;background:transparent;color:var(--accent);font-weight:700;font-size:11px}
.login-form label:not(:first-child){margin-top:13px}.primary-button{width:100%;height:52px;display:flex;justify-content:center;align-items:center;gap:13px;margin-top:18px;background:linear-gradient(110deg,#d9b78a,#b99060);color:#251a12;border:0;border-radius:12px;font-weight:800;font-size:14px;transition:transform .2s,filter .2s;box-shadow:0 8px 22px rgba(173,122,65,.18)}
.primary-button:hover{transform:translateY(-2px);filter:brightness(1.08)}.primary-button .icon{width:17px;height:17px}.form-error{font-size:12px;color:var(--error);margin:1px 0 0}
.auth-foot{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line-soft);margin-top:28px;padding-top:20px;color:var(--muted);font-size:11px}.auth-foot .icon{width:14px;height:14px}
.workspace{padding-bottom:14px}.hero{margin-top:31px;min-height:263px;border:1px solid var(--line);border-radius:23px;background:var(--hero-grad);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;padding:42px 49px;gap:36px}
.hero:before,.hero:after{content:"";position:absolute;pointer-events:none;border:1px solid rgba(185,146,102,.12);border-radius:50%;width:400px;height:400px;right:90px;top:-220px}.hero:after{width:330px;height:330px;right:126px;top:-186px;border-color:rgba(185,146,102,.08)}
.hero-left{position:relative;z-index:1;max-width:590px}.hero h1{font-size:clamp(32px,3.6vw,48px);margin:19px 0 12px}.hero p{color:var(--muted);max-width:515px;font-size:13px;line-height:1.7;margin-bottom:0}
.hero-stats{position:relative;z-index:1;display:flex;align-items:stretch;gap:11px}.hero-stat{width:134px;min-height:129px;padding:15px 16px;border-radius:14px;background:rgba(12,12,15,.14);border:1px solid rgba(182,153,120,.2);display:flex;flex-direction:column}
html[data-theme="white"] .hero-stat{background:rgba(255,255,255,.46)}.hero-stat span{color:var(--muted);font-size:9px;letter-spacing:.11em;font-weight:800}.hero-stat strong{font-size:37px;letter-spacing:-.06em;margin-top:8px;line-height:1.1}.hero-stat small{font-size:11px;color:var(--muted)}
.offline-banner{margin-top:18px;padding:11px 16px;border:1px solid rgba(226,170,90,.38);border-radius:12px;background:var(--accent-glow);color:var(--text);display:flex;gap:11px;align-items:center;font-size:13px}
.panel{margin-top:24px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--shadow);padding:28px 31px 0;overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:23px}.section-eyebrow{font-size:9px;color:var(--dim)}
.panel-head h2{font-size:27px;letter-spacing:-.03em;margin:6px 0 0}.heading-light{color:var(--muted);font-weight:430}
.refresh-button{height:39px;display:flex;align-items:center;gap:9px;padding:0 13px;border-radius:10px;background:var(--card);border:1px solid var(--line);color:var(--text);font-size:12px;font-weight:650;transition:border-color .2s,transform .2s}.refresh-button:hover{border-color:var(--accent);transform:translateY(-1px)}.refresh-button .icon{width:15px;height:15px}
.registry-tabs{display:flex;background:var(--inset);border-radius:13px;padding:5px;gap:5px;border:1px solid var(--line-soft)}.registry-tab{flex:1;display:flex;justify-content:center;align-items:center;gap:12px;border-radius:10px;padding:13px 10px;border:1px solid transparent;background:transparent;color:var(--muted);font-weight:750;letter-spacing:.005em;transition:background .2s,color .2s,box-shadow .2s}
.registry-tab.active{background:var(--card2);color:var(--text);border-color:var(--line);box-shadow:0 2px 12px rgba(0,0,0,.08)}.registry-tab.active .icon{color:var(--accent)}.registry-tab small{color:var(--dim);font-size:9px;letter-spacing:.09em}
.filter-block{padding:24px 0 26px}.search-line{display:flex;align-items:center;gap:11px}.search-box{height:49px;display:flex;align-items:center;gap:13px;flex:1;min-width:0;background:var(--inset);border:1px solid var(--line);border-radius:11px;padding:0 16px;transition:border-color .2s}.search-box:focus-within{border-color:var(--accent)}.search-box>.icon{color:var(--muted)}
.search-box input{border:none!important;outline:none!important;background:transparent!important;width:100%;height:100%;color:var(--text);font-size:14px;min-width:0}.search-box input::placeholder{color:var(--dim)}.search-shortcut{font-size:9px;font-weight:850;color:var(--dim);letter-spacing:.12em}
.mine-button{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;height:49px;min-width:98px;border:1px solid var(--line);border-radius:11px;color:var(--text);background:var(--card);font-size:13px;font-weight:700;transition:.2s}.mine-button[aria-pressed="true"]{background:var(--accent-glow);border-color:var(--accent);color:var(--accent2)}.mine-button .icon{width:17px;height:17px}
.direction-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:25px;margin-bottom:11px;font-size:10px;color:var(--dim);letter-spacing:.12em;font-weight:850}.direction-header span:last-child{color:var(--accent);font-weight:730;letter-spacing:0;text-transform:none}
.direction-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px}.direction-list::-webkit-scrollbar{display:none}.direction-pill{white-space:nowrap;flex:0 0 auto;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--muted);font-size:12px;font-weight:700;transition:background .2s,color .2s,transform .2s,border-color .2s}.direction-pill:hover{transform:translateY(-2px);color:var(--text)}.direction-pill.selected{color:var(--accent2);border-color:var(--accent);background:var(--accent-glow);box-shadow:0 0 0 2px rgba(214,175,124,.05)}
.list-heading{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 1px;display:flex;align-items:center;justify-content:space-between;gap:12px}.list-heading>div:first-child{display:flex;align-items:center;gap:10px;min-width:0}.list-heading strong{font-weight:780;font-size:15px;white-space:nowrap}.list-live-dot{display:block;width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(52,156,92,.12)}.record-count{border-radius:6px;background:var(--inset);padding:4px 8px;color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}
.last-updated{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:11px;text-align:right;white-space:nowrap}.last-updated .icon{width:14px;height:14px}.last-updated.stale{color:var(--warning)}
.records{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-top:20px}.record-card{min-width:0;border:1px solid var(--line);background:var(--card);border-radius:14px;padding:19px 19px 15px;transition:border-color .2s,transform .2s,box-shadow .2s;position:relative;overflow:hidden;animation:rise-in .28s ease both}
.record-card:hover{border-color:rgba(201,163,110,.48);transform:translateY(-2px);box-shadow:0 10px 35px rgba(0,0,0,.08)}.record-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--dim)}.record-card[data-status="terminal"]:before{background:var(--warning)}.record-card[data-status="done"]:before{background:var(--success)}.record-card[data-status="departed"]:before{background:var(--blue)}
.record-top{display:flex;align-items:start;justify-content:space-between;gap:7px}.record-meta{color:var(--dim);font-size:9px;letter-spacing:.15em;font-weight:850;margin-bottom:5px}.record-invoice{font-weight:790;font-size:17px;letter-spacing:-.02em;line-height:1.25;overflow-wrap:anywhere}
.copy-button{width:31px;height:31px;border-radius:8px;background:var(--inset);color:var(--muted);border:1px solid var(--line);display:grid;place-items:center;flex:none}.copy-button:hover{color:var(--accent)}.copy-button .icon{width:15px;height:15px}
.record-status{display:inline-flex;align-items:center;gap:7px;max-width:100%;margin-top:13px;font-size:11px;font-weight:750;border-radius:7px;background:var(--inset);color:var(--muted);padding:6px 9px;line-height:1.25}.record-status .dot{width:6px;height:6px;border-radius:50%;background:var(--dim);flex:none}
.record-card[data-status="terminal"] .record-status{color:var(--warning)}.record-card[data-status="terminal"] .dot{background:var(--warning)}
.record-card[data-status="done"] .record-status{color:var(--success)}.record-card[data-status="done"] .dot{background:var(--success)}
.record-card[data-status="departed"] .record-status{color:var(--blue)}.record-card[data-status="departed"] .dot{background:var(--blue)}
.record-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px;margin-top:17px;padding:15px 0;border-top:1px solid var(--line-soft)}.record-fields>div{min-width:0}.record-fields small,.record-extra small{display:block;color:var(--dim);font-size:10px;margin-bottom:5px}.record-fields strong,.record-extra strong{display:block;font-size:12px;font-weight:730;overflow-wrap:anywhere}.record-fields strong.empty{color:var(--dim);font-weight:400}
.card-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.card-direction{font-size:11px;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px;min-width:0}.card-expand{border:0;background:transparent;color:var(--accent);display:flex;align-items:center;gap:5px;font-size:11px;font-weight:750;padding:7px 0 7px 8px;white-space:nowrap}.card-expand .icon{width:13px;height:13px;transition:transform .25s}.record-card.expanded .card-expand .icon{transform:rotate(180deg)}
.record-extra{display:grid;grid-template-columns:1fr 1fr;gap:13px 10px;margin-top:14px;padding:16px 0 3px;border-top:1px dashed var(--line);animation:rise-in .2s}.record-extra .span-2{grid-column:1/-1}.record-extra .public-note{color:var(--muted);font-weight:500;line-height:1.55}
.empty-state{text-align:center;padding:65px 12px 75px}.empty-graphic{width:67px;height:67px;margin:0 auto 19px;border:1px solid var(--line);border-radius:20px;background:var(--inset);display:grid;place-items:center;color:var(--accent)}.empty-graphic .icon{width:33px;height:33px;stroke-width:1.3}.empty-state h3{font-size:18px;letter-spacing:-.02em;margin:0 0 7px}.empty-state p{color:var(--muted);font-size:13px;max-width:330px;margin:0 auto;line-height:1.7}
.list-error{padding:12px 15px;margin-top:13px;background:rgba(223,93,79,.08);color:var(--error);border:1px solid rgba(223,93,79,.2);border-radius:10px;font-size:13px}
.list-footer{min-height:75px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;margin-top:12px}.more-button{padding:9px 20px;display:flex;align-items:center;gap:8px;color:var(--accent);border:1px solid var(--line);background:var(--card);border-radius:9px;font-size:12px;font-weight:750}.more-button .icon{width:15px;height:15px}.readonly-hint{display:flex;align-items:center;gap:7px;color:var(--dim);font-size:11px}.readonly-hint .icon{width:12px;height:12px}
.footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--dim);font-size:10px;letter-spacing:.09em;padding:31px 3px 48px}.footer b{color:var(--accent);font-weight:800}
.mobile-nav{display:none}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.67);z-index:100;display:grid;place-items:center;padding:16px;backdrop-filter:blur(6px)}.profile-dialog{background:var(--panel);border:1px solid var(--line);border-radius:21px;box-shadow:var(--shadow);max-width:400px;width:100%;padding:30px;position:relative;animation:rise-in .25s ease}.dialog-close{position:absolute;right:22px;top:22px}.dialog-eyebrow{font-size:10px}.profile-dialog h2{font-size:28px;margin:12px 0 25px}.profile-avatar{width:60px;height:60px;border-radius:19px;display:grid;place-items:center;color:var(--accent);font-size:25px;font-weight:800;border:1px solid var(--line);background:var(--accent-glow)}.profile-login{font-weight:800;font-size:19px;margin:10px 0 23px}.profile-row{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line-soft);padding:14px 0;font-size:12px}.profile-row span{color:var(--muted)}.profile-row strong{max-width:62%;text-align:right;font-size:11px;overflow-wrap:anywhere}.text-switch{border:0;background:transparent;color:var(--accent);font-weight:750;font-size:12px}.logout-button{width:100%;height:45px;border:1px solid var(--line);background:var(--card);border-radius:10px;color:var(--text);font-size:12px;font-weight:750;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px}.logout-button:hover{color:var(--error)}
.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:200;background:var(--text);color:var(--bg);padding:11px 20px;border-radius:10px;font-size:12px;font-weight:750;box-shadow:var(--shadow);max-width:90vw;text-align:center;white-space:nowrap}
@keyframes rise-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:1020px){.hero{padding:33px}.hero-stats{gap:8px}.hero-stat{width:120px}.records{gap:10px}.auth-layout{gap:5%}}
@media (max-width:760px){.site-wrap{padding:0 17px}.header{height:77px}.mark{width:38px;height:38px;font-size:24px}.wordmark{font-size:17px}.brand-caption{font-size:8px}.read-only-badge{font-size:8px;padding:8px;gap:5px}.read-only-badge .icon{width:12px;height:12px}.theme-control{width:37px;height:37px}.header-actions{gap:7px}
 .auth-layout{display:flex;flex-direction:column;align-items:stretch;gap:30px;padding:43px 0 65px;min-height:auto}.auth-feature h1{font-size:clamp(37px,9vw,55px);margin:21px 0 16px}.auth-feature>p{font-size:13px;line-height:1.75}.feature-row{margin-top:27px;gap:15px;font-size:9px}.accent-lines{display:none}.auth-card{border-radius:20px;padding:29px 23px 26px}.auth-card h2{font-size:27px;margin-top:20px}.login-form{margin-top:23px}.auth-foot{margin-top:24px}
 .hero{margin-top:17px;min-height:0;border-radius:17px;padding:25px 22px;display:block}.hero h1{font-size:clamp(30px,7.4vw,42px);margin:15px 0 8px}.hero p{font-size:12px}.hero-stats{margin-top:21px;justify-content:stretch;gap:10px}.hero-stat{width:50%;min-height:96px;padding:12px 13px}.hero-stat strong{font-size:31px;margin-top:2px}.hero-stat span{font-size:8px}.hero-stat small{font-size:10px}
 .panel{margin-top:15px;border-radius:17px;padding:21px 15px 0}.panel-head{margin-bottom:18px}.panel-head h2{font-size:22px}.section-eyebrow{font-size:8px}.refresh-button{width:38px;height:38px;padding:0;justify-content:center}.refresh-button span{display:none}.registry-tabs{padding:4px}.registry-tab{gap:7px;font-size:12px;padding:12px 4px}.registry-tab .icon{width:15px;height:15px}.registry-tab small{font-size:8px}
 .filter-block{padding:17px 0 15px}.search-line{gap:8px}.search-box{height:46px;padding:0 11px;gap:8px}.search-box input{font-size:13px}.search-shortcut{display:none}.mine-button{min-width:70px;padding:0 10px;height:46px;gap:5px;font-size:12px}.mine-button .icon{width:15px}.direction-header{margin-top:20px}.direction-list{margin-right:-15px;padding-right:15px;gap:7px}.direction-pill{min-height:34px;font-size:11px;padding:0 12px}
 .list-heading{padding:17px 0;align-items:start}.list-heading strong{font-size:13px}.record-count{font-size:10px}.last-updated{font-size:9px;max-width:112px;white-space:normal;justify-content:end;line-height:1.4}.last-updated .icon{display:none}.records{grid-template-columns:1fr;gap:10px;padding-top:14px}.record-card{padding:16px 16px 13px}.record-invoice{font-size:17px}.record-fields{gap:13px;margin-top:14px;padding:14px 0}.record-fields strong{font-size:12px}.empty-state{padding:60px 12px}.footer{flex-direction:column;align-items:flex-start;font-size:9px;padding:24px 0 100px;gap:6px}.list-footer{padding-bottom:12px}
 .mobile-nav{position:fixed;display:flex;left:0;right:0;bottom:0;z-index:50;min-height:65px;padding:7px 10px max(6px,env(safe-area-inset-bottom));background:var(--glass);border-top:1px solid var(--line);backdrop-filter:blur(16px);box-shadow:0 -5px 30px rgba(0,0,0,.08);justify-content:space-around}.nav-item{border:0;background:transparent;color:var(--dim);display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:center;font-size:10px;font-weight:750;letter-spacing:.015em;min-width:60px;padding:7px}.nav-item .icon{width:20px;height:20px}.nav-item.active{color:var(--accent)}.toast{bottom:93px}
}
@media (max-width:360px){.read-only-badge{display:none}.hero-stats{gap:7px}.registry-tab small{display:none}.record-count{display:none}.panel-head h2{font-size:20px}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* ===============================================================
 * SISTEM MOBILE — OTO Black / OTO White v1.3
 * Presentation only. No server routes, HTML IDs or API contracts changed.
 * =============================================================== */
:root{
  --bg:#0c0c0f;
  --bg2:#121114;
  --panel:#18171b;
  --card:#201e22;
  --card2:#272429;
  --inset:#141317;
  --line:#383138;
  --line-soft:#2e292f;
  --text:#f7f2ef;
  --muted:#a7a0a2;
  --dim:#857d82;
  --accent:#dfb98a;
  --accent2:#f4d9b9;
  --accent-glow:rgba(225,184,132,.17);
  --glass:rgba(15,14,18,.91);
  --hero-grad:linear-gradient(118deg,#302721 0%,#211c1f 34%,#121116 83%,#161519 100%);
  --shadow:0 23px 70px rgba(0,0,0,.28);
  --warning:#e9bf65;
  --success:#73c59a;
  --blue:#65789c;
}
html[data-theme="white"]{
  --bg:#f5f3f1;
  --bg2:#ebe8e5;
  --panel:#fffcf9;
  --card:#fffefe;
  --card2:#f6f1ed;
  --inset:#f6f2ee;
  --line:#e3dcd6;
  --line-soft:#eae5df;
  --text:#28232a;
  --muted:#716d70;
  --dim:#888286;
  --accent:#986638;
  --accent2:#765028;
  --accent-glow:rgba(153,104,64,.11);
  --glass:rgba(254,252,249,.94);
  --hero-grad:linear-gradient(118deg,#f0dfd0 0%,#fbf5ef 45%,#f6f1eb 100%);
  --shadow:0 18px 55px rgba(54,39,34,.085);
  --warning:#a77524;
  --success:#278252;
  --blue:#465a83;
}
html,body{min-height:100%;overscroll-behavior-x:none}
body{
 background-image:radial-gradient(ellipse 55% 35% at -7% 10%,rgba(202,143,88,.06),transparent 80%),radial-gradient(ellipse 50% 45% at 106% 52%,rgba(171,125,126,.045),transparent 80%);
 background-attachment:fixed;
}
html[data-theme="white"] body{
 background-image:radial-gradient(ellipse 55% 35% at -7% 10%,rgba(183,140,99,.06),transparent 80%),radial-gradient(ellipse 45% 30% at 110% 52%,rgba(161,122,108,.055),transparent 80%);
}
.site-wrap{max-width:1250px}
.header{
 height:88px;
 border-bottom-color:var(--line);
 position:relative;
}
.header:after{content:"";position:absolute;bottom:-1px;left:0;width:70px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.identity{gap:12px}
.mark{
 width:48px;height:48px;border-radius:15px;
 background:linear-gradient(140deg,rgba(237,183,123,.19),rgba(123,86,54,.045));
 box-shadow:0 8px 25px rgba(0,0,0,.12),inset 0 1px 0 rgba(240,205,169,.18);
 transition:transform .3s cubic-bezier(.2,.9,.2,1);
}
.identity:hover .mark{transform:rotate(-5deg) scale(1.035)}
.wordmark{font-size:20px;letter-spacing:.115em}
.brand-caption{letter-spacing:.26em}
.read-only-badge{background:linear-gradient(135deg,var(--accent-glow),transparent);border-color:rgba(210,158,110,.3);letter-spacing:.14em}
.icon-button{background:var(--card);border-color:var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.icon-button:hover{box-shadow:0 0 0 3px var(--accent-glow)}
.overline{letter-spacing:.2em}
.auth-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);padding:72px 0 75px;min-height:calc(100vh - 88px);gap:7%}
.auth-feature{position:relative}
.auth-feature:before{
 content:"";position:absolute;width:180px;height:180px;top:-60px;left:-75px;pointer-events:none;
 background:radial-gradient(circle,rgba(223,175,122,.11),transparent 70%);filter:blur(12px)
}
.auth-feature h1{font-size:clamp(46px,5vw,70px);max-width:700px;line-height:1.09;letter-spacing:-.058em;margin:28px 0 22px}
.auth-feature h1 em{font-style:normal;font-family:inherit;font-weight:750;color:var(--accent);letter-spacing:-.056em}
.auth-feature>p{max-width:440px;line-height:1.65}
.feature-row{gap:22px;margin-top:34px}
.auth-card{
 background:linear-gradient(155deg,var(--panel),var(--inset));
 border-radius:26px;border:1px solid var(--line);
 box-shadow:0 30px 80px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);
 padding:38px 36px 30px;
}
html[data-theme="white"] .auth-card{box-shadow:0 30px 80px rgba(70,46,29,.09),inset 0 1px 0 rgba(255,255,255,.75)}
.auth-card:before{content:"";position:absolute;top:0;left:30px;right:30px;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.46}
.auth-card h2{font-size:30px;margin:21px 0 7px}
.auth-card>p{line-height:1.55}
.login-form{margin-top:24px;gap:7px}
.login-form input{height:50px;border-radius:13px}
.login-form input:focus{box-shadow:0 0 0 4px var(--accent-glow)}
.primary-button{
 border-radius:14px;
 box-shadow:0 12px 28px rgba(197,148,95,.18),inset 0 1px 0 rgba(255,255,255,.24);
 position:relative;overflow:hidden;
}
.primary-button:before{content:"";position:absolute;inset:0;transform:translateX(-130%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.23),transparent);transition:transform .6s cubic-bezier(.18,.8,.16,1);pointer-events:none}
.primary-button:hover:before{transform:translateX(135%) skewX(-20deg)}
/* Workspace: compact status area before the records, especially on phones. */
.hero{
 margin-top:25px;min-height:215px;padding:34px 39px;
 border-radius:25px;border:1px solid var(--line);
 background:var(--hero-grad);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.028);
}
.hero:before,.hero:after{border-color:rgba(220,180,127,.14);right:0}
.hero-left{position:relative;z-index:1}
.hero h1{font-size:clamp(32px,3.4vw,46px);line-height:1.11;margin:18px 0 10px}
.hero h1 em{font-family:inherit;font-weight:750}
.hero p{max-width:525px;font-size:13px;line-height:1.6}
.hero-stats{position:relative;z-index:1}
.hero-stat{box-shadow:inset 0 1px 0 rgba(255,255,255,.03);backdrop-filter:blur(9px)}
.panel{
 margin-top:17px;border-radius:24px;padding:27px 30px 0;
 background:linear-gradient(160deg,var(--panel),var(--panel) 75%,var(--bg2));
 border-color:var(--line);
}
.panel-head h2{font-size:25px}
.registry-tabs{border-radius:15px;padding:5px;gap:5px}
.registry-tab{border-radius:11px;position:relative}
.registry-tab.active{box-shadow:0 4px 16px rgba(0,0,0,.09),inset 0 1px 0 rgba(255,255,255,.03)}
.registry-tab.active:after{content:"";position:absolute;left:30%;right:30%;bottom:0;height:2px;border-radius:5px;background:var(--accent);opacity:.95}
.filter-block{padding-top:20px}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.direction-pill{border-radius:10px;transition:background .18s,color .18s,transform .18s,border-color .18s}
.direction-pill:hover{transform:translateY(-1px)}
.direction-pill.selected{box-shadow:0 0 0 2px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.05)}
.list-heading{border-top-color:var(--line)}
.records{gap:13px}
.record-card{
 border-radius:17px;padding:19px 20px 16px;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
 animation:oto-card-in .38s cubic-bezier(.2,.8,.2,1) both;
 transform-origin:center top;
}
.record-card:hover{transform:translateY(-3px);border-color:rgba(219,177,126,.46);box-shadow:0 16px 35px rgba(0,0,0,.13)}
.record-card:before{width:4px}
.record-card[data-status="terminal"]{border-left-color:rgba(233,191,101,.38)}
.record-card[data-status="done"]{border-left-color:rgba(115,197,154,.42)}
.record-card[data-status="departed"]{border-left-color:rgba(101,120,156,.5)}
.record-invoice{font-size:18px;letter-spacing:.005em;font-variant-numeric:tabular-nums}
.record-meta{color:var(--muted);font-size:9px;letter-spacing:.12em}
.record-status{border:1px solid var(--line-soft);border-radius:9px;margin-top:12px;padding:6px 9px}
.record-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border-top-color:var(--line-soft)}
.record-fields small,.record-extra small{font-size:10px;letter-spacing:.005em}
.record-fields strong{font-size:13px}
.record-extra{border-top-color:var(--line)}
.card-expand{border-radius:8px;transition:color .2s,background .2s}
.card-expand:hover{background:var(--accent-glow)}
.copy-button{transition:background .2s,transform .2s,color .2s}
.copy-button:hover{background:var(--accent-glow);transform:scale(1.05)}
.empty-graphic{background:var(--accent-glow);border-color:var(--line)}
.modal-backdrop{animation:oto-fade-in .18s ease both}
.profile-dialog{box-shadow:0 30px 100px rgba(0,0,0,.35);animation:oto-dialog-in .28s cubic-bezier(.19,.85,.2,1) both}
.nav-item{transition:color .2s,transform .2s}
.nav-item:active{transform:scale(.95)}
.toast{animation:oto-toast-in .2s cubic-bezier(.2,.8,.2,1) both}
@keyframes oto-card-in{from{opacity:0;transform:translateY(12px);filter:blur(2px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes oto-fade-in{from{opacity:0}to{opacity:1}}
@keyframes oto-dialog-in{from{opacity:0;transform:translateY(13px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes oto-toast-in{from{opacity:0;transform:translate(-50%,9px)}to{opacity:1;transform:translate(-50%,0)}}
@media(min-width:761px){
 .record-card:nth-child(2n){animation-delay:.035s}
 .record-card:nth-child(3n){animation-delay:.065s}
}
/* Phone layout: reach the sign-in form and shipment cards quickly. */
@media(max-width:760px){
 .site-wrap{padding:0 15px}
 .header{height:70px;gap:6px}
 .mark{width:37px;height:37px;border-radius:12px;font-size:22px}
 .wordmark{font-size:17px}.brand-caption{font-size:7px;letter-spacing:.22em}
 .read-only-badge{font-size:8px;letter-spacing:.05em;padding:8px 9px}
 .read-only-badge .icon{width:12px}
 .theme-control{height:37px;width:37px}
 .auth-layout{gap:17px;padding:29px 0 30px;min-height:0;display:flex;flex-direction:column}
 .auth-feature .overline{font-size:9px}
 .auth-feature h1{font-size:clamp(29px,8vw,39px);max-width:440px;line-height:1.10;margin:13px 0 11px}
 .auth-feature>p{font-size:12px;line-height:1.45;margin-bottom:0;max-width:380px}
 .feature-row,.accent-lines{display:none}
 .auth-card{padding:23px 21px 20px;border-radius:21px}
 .auth-card h2{font-size:25px;margin:16px 0 5px}
 .auth-card>p{font-size:12px;line-height:1.45}
 .login-form{margin-top:17px;gap:6px}
 .login-form input{height:46px}
 .login-form label:not(:first-child){margin-top:7px}
 .primary-button{min-height:48px;border-radius:12px}
 .auth-foot{margin-top:16px}
 .hero{margin-top:13px;min-height:0;border-radius:20px;padding:19px 19px 17px}
 .hero .overline{font-size:8px;letter-spacing:.17em}
 .hero h1{font-size:clamp(23px,6.4vw,31px);line-height:1.12;margin:10px 0 8px}
 .hero p{font-size:11px;line-height:1.45;margin-bottom:0;max-width:330px}
 .hero-stats{margin-top:14px;gap:8px}
 .hero-stat{min-height:73px;padding:10px 12px;border-radius:12px}
 .hero-stat strong{font-size:26px;line-height:1.0;margin:5px 0 2px}
 .hero-stat span{font-size:8px}
 .hero-stat small{font-size:9px}
 .panel{margin-top:11px;padding:17px 14px 0;border-radius:20px}
 .panel-head{margin-bottom:14px}
 .panel-head h2{font-size:21px;margin:4px 0 0}
 .section-eyebrow{font-size:8px}
 .registry-tabs{padding:4px;border-radius:12px}
 .registry-tab{font-size:12px;gap:7px;padding:10px 4px;border-radius:9px}
 .registry-tab small{font-size:7px}
 .filter-block{padding:13px 0 13px}
 .search-line{gap:7px}
 .search-box{height:42px;border-radius:11px;padding:0 10px}
 .search-box input{font-size:12px}
 .mine-button{height:42px;min-width:67px;border-radius:11px}
 .direction-header{margin-top:14px;margin-bottom:9px}
 .direction-list{gap:7px;max-height:37px;overflow-y:hidden}
 .direction-pill{min-height:33px;padding:0 11px;font-size:11px}
 .list-heading{padding:12px 0 9px}
 .last-updated{max-width:116px;font-size:9px}
 .records{padding-top:10px;gap:9px}
 .record-card{padding:15px 15px 12px;border-radius:15px}
 .record-invoice{font-size:17px}
 .record-status{margin-top:10px}
 .record-fields{margin-top:12px;padding:11px 0;gap:10px 8px}
 .record-fields strong{font-size:12px}
 .record-fields small{font-size:9px}
 .empty-state{padding:42px 12px 48px}
 .mobile-nav{
  min-height:65px;padding:6px 10px max(5px,env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--glass);box-shadow:0 -10px 30px rgba(0,0,0,.16)
 }
 .nav-item{min-width:68px;padding:7px 5px}
 .nav-item.active:before{content:"";position:absolute;top:1px;width:27px;height:2px;background:var(--accent);border-radius:3px}
 .nav-item{position:relative}
 .footer{padding-bottom:98px}
}
@media(max-width:360px){
 .header-actions{gap:5px}
 .read-only-badge{font-size:7px;padding:7px}
 .auth-feature h1{font-size:28px}
 .brand-caption{display:none}
 .wordmark{font-size:16px}
 .hero-stats{gap:6px}
 .direction-pill{padding:0 9px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}


/* OTO v1.4 — neutral sign-in page; workspace styles are unchanged. */
body.login-view .site-wrap {max-width:none;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 20px;}
body.login-view .header {display:none!important;}
body.login-view .ambient-one {opacity:.16;}
body.login-view .ambient-two {opacity:.12;}
body.login-view .auth-layout {display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;padding:0;margin:0;min-height:0;gap:0;grid-template-columns:none;}
body.login-view .auth-simple-card {width:100%;max-width:410px;margin:0;padding:36px 35px 35px;border-radius:20px;background:var(--panel);box-shadow:0 26px 80px rgba(0,0,0,.20);}
body.login-view .auth-simple-card::before {content:none;}
body.login-view .auth-simple-top {display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;}
body.login-view .auth-simple-icon {width:47px;height:47px;display:grid;place-items:center;border-radius:14px;color:var(--accent);background:var(--accent-glow);border:1px solid var(--line);}
body.login-view .auth-simple-icon .icon {width:21px;height:21px;}
body.login-view .auth-theme-control {width:36px;height:36px;border-radius:10px;}
body.login-view .auth-theme-control .icon {width:17px;height:17px;}
body.login-view .auth-simple-card h1 {color:var(--text);margin:0;font-size:30px;font-weight:750;line-height:1.12;letter-spacing:-.045em;}
body.login-view .auth-simple-subtitle {font-size:13px;line-height:1.5;color:var(--muted);margin:9px 0 0;max-width:none;}
body.login-view .login-form {margin-top:29px;gap:9px;}
body.login-view .login-form label {font-size:12px;letter-spacing:0;}
body.login-view .login-form label:not(:first-child) {margin-top:11px;}
body.login-view .login-form input {height:49px;}
body.login-view .primary-button {height:49px;min-height:49px;margin-top:16px;font-size:14px;}
body.login-view .form-error {line-height:1.45;}
html[data-theme="white"] body.login-view .auth-simple-card {box-shadow:0 25px 80px rgba(58,39,22,.09);}
@media(max-width:600px){
 body.login-view .site-wrap {padding:18px 15px;min-height:100dvh;}
 body.login-view .auth-layout {width:100%;}
 body.login-view .auth-simple-card {padding:29px 23px 28px;border-radius:20px;max-width:390px;}
 body.login-view .auth-simple-top {margin-bottom:20px;}
 body.login-view .auth-simple-card h1 {font-size:27px;}
 body.login-view .login-form {margin-top:23px;}
 body.login-view .login-form input {height:48px;}
}
@media(max-width:340px){body.login-view .site-wrap{padding:12px;}body.login-view .auth-simple-card{padding:24px 18px}}