:root{color-scheme:dark;--bg:#06101d;--deep:#030913;--card:#0d1d30;--card2:#122640;--line:rgba(148,163,184,.17);--text:#f8fafc;--muted:#91a2b8;--blue:#18a0fb;--green:#28d17c;--amber:#f6b94a;--red:#fb6b72;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,system-ui,sans-serif;background:var(--deep);color:var(--text)}
*{box-sizing:border-box}html{min-height:100%;background:var(--deep);scroll-behavior:smooth}body{min-height:100vh;margin:0;background:radial-gradient(circle at 50% -14rem,rgba(24,160,251,.2),transparent 30rem),linear-gradient(180deg,#081522,var(--bg) 45%,var(--deep));color:var(--text)}button,input,select,textarea{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid rgba(56,189,248,.5);outline-offset:2px}[hidden]{display:none!important}
.offline{position:fixed;z-index:100;inset:0 0 auto;padding:calc(8px + var(--safe-top)) 16px 8px;background:#9a3412;text-align:center;font-size:12px;font-weight:800}.app{width:min(100%,760px);min-height:100vh;margin:auto;border-inline:1px solid rgba(148,163,184,.06);background:rgba(4,13,24,.72);box-shadow:0 0 90px rgba(0,0,0,.28)}
.topbar{position:sticky;z-index:40;top:0;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;min-height:calc(70px + var(--safe-top));padding:var(--safe-top) 16px 0;border-bottom:1px solid rgba(148,163,184,.11);background:rgba(5,14,25,.9);backdrop-filter:blur(20px)}.brand{display:flex;justify-self:center;align-items:center;gap:10px;color:var(--text);text-decoration:none}.brand>span:last-child strong,.brand small{display:block}.brand strong{font-size:14px}.brand small{margin-top:2px;color:#54c6ff;font-size:8px;font-weight:900;letter-spacing:.15em}.logo{display:grid;width:38px;height:38px;place-items:center;border-radius:12px;background:linear-gradient(145deg,#0ea5e9,#1765d7);box-shadow:0 9px 24px rgba(14,165,233,.25);font-size:14px;font-weight:950}.icon-btn,.avatar{display:grid;width:40px;height:40px;place-items:center;border:1px solid var(--line);border-radius:13px;background:rgba(15,30,49,.8);cursor:pointer}.icon-btn{font-size:24px}.avatar{justify-self:end;border-color:rgba(24,160,251,.25);background:rgba(24,160,251,.12);color:#7dd3fc;font-size:10px;font-weight:950}
.screen{min-height:calc(100vh - 70px);padding:26px 20px calc(105px + var(--safe-bottom));animation:appear .3s ease both}@keyframes appear{from{opacity:0;transform:translateY(7px)}}.center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.center h1{margin:18px 0 7px;font-size:clamp(27px,7vw,36px)}.center>p{max-width:390px;margin:0}.loader{position:relative;display:grid;width:84px;height:84px;place-items:center;border-radius:26px;background:linear-gradient(145deg,#16b5f4,#1757d4);box-shadow:0 20px 60px rgba(17,115,213,.38);font-size:26px;font-weight:950}.loader:before{position:absolute;inset:-11px;border:2px solid rgba(56,189,248,.17);border-top-color:#38bdf8;border-radius:32px;animation:spin 1.2s linear infinite;content:""}@keyframes spin{to{transform:rotate(360deg)}}.loading-bar{width:min(72vw,300px);height:4px;margin-top:26px;overflow:hidden;border-radius:20px;background:rgba(148,163,184,.13)}.loading-bar span{display:block;width:45%;height:100%;background:linear-gradient(90deg,transparent,#38bdf8,transparent);animation:load 1.2s infinite}@keyframes load{from{transform:translateX(-110%)}to{transform:translateX(240%)}}
.heading{margin-bottom:25px}.heading h1,.welcome h1,.record-head h1{margin:7px 0 4px;font-size:clamp(27px,7vw,38px);line-height:1.2}.heading p,.record-head p{margin:0}.eyebrow{margin:0;color:#54c6ff;font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.muted{color:var(--muted);line-height:1.65}.pill{display:inline-flex;align-items:center;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(17,37,60,.8);color:#cbd5e1;font-size:10px;font-weight:850}
.form-stack{display:grid;gap:17px}.field{position:relative;display:grid;gap:8px;color:#cbd5e1;font-size:13px;font-weight:800}.field>span:first-child{font-weight:850}.field small{color:var(--muted);font-weight:600}.field input,.field select,.field textarea{width:100%;border:1px solid rgba(148,163,184,.28);border-radius:16px;background:rgba(12,28,46,.9);color:var(--text)}.field input,.field select{min-height:54px;padding:0 15px}.field textarea{min-height:118px;padding:14px;resize:vertical;line-height:1.55}.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7dd3fc 50%),linear-gradient(135deg,#7dd3fc 50%,transparent 50%);background-position:calc(100% - 19px) 23px,calc(100% - 13px) 23px;background-repeat:no-repeat;background-size:6px 6px}.field select:disabled{opacity:.55}.short{max-width:240px}.count{position:absolute;right:12px;bottom:9px;font-size:10px}.line-select{margin:0;padding:16px;border:1px solid var(--line);border-radius:20px;background:rgba(10,24,40,.55)}.line-select legend{font-size:13px;font-weight:850}.line-select p,.help{margin:3px 0 12px;color:var(--muted);font-size:11px}.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.check-grid label{position:relative}.check-grid input{position:absolute;opacity:0}.check-grid span{display:flex;min-height:48px;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--line);border-radius:14px;background:rgba(17,36,58,.72);font-size:11px}.check-grid span:before{display:grid;width:20px;height:20px;flex:none;place-items:center;border:1px solid rgba(148,163,184,.42);border-radius:7px;content:""}.check-grid input:checked+span{border-color:rgba(24,160,251,.55);background:rgba(24,160,251,.13)}.check-grid input:checked+span:before{border-color:var(--blue);background:var(--blue);content:"✓"}
.btn{min-height:54px;border-radius:17px;font-weight:900;cursor:pointer}.btn:active{transform:scale(.985)}.btn:disabled{cursor:wait;opacity:.55}.primary,.success,.secondary,.danger{width:100%}.primary{border:0;background:linear-gradient(135deg,#1eb7f2,#1164dc);box-shadow:0 13px 32px rgba(13,111,213,.28)}.success{border:0;background:linear-gradient(135deg,#2dd486,#059669)}.secondary{border:1px solid rgba(148,163,184,.26);background:rgba(15,31,51,.9)}.danger{border:1px solid rgba(251,107,114,.35);background:rgba(251,107,114,.14);color:#fecdd3}.text{border:0;background:transparent;color:#7dd3fc}.small-btn{min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:rgba(14,29,48,.8);color:#7dd3fc;font-size:10px;font-weight:850;cursor:pointer}
.welcome,.record-head,.title-row,.summary-head,.progress-card>div{display:flex;align-items:center;justify-content:space-between;gap:14px}.welcome{margin-bottom:19px}.hero{padding:21px;border:1px solid rgba(56,189,248,.22);border-radius:25px;background:radial-gradient(circle at 100% 0,rgba(56,189,248,.2),transparent 13rem),linear-gradient(145deg,rgba(13,43,70,.96),rgba(8,27,46,.96));box-shadow:0 24px 70px rgba(0,0,0,.3)}.ready{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid rgba(40,209,124,.22);border-radius:999px;background:rgba(40,209,124,.13);color:#93f6c0;font-size:9px;font-weight:950}.ready i{width:7px;height:7px;border-radius:50%;background:var(--green)}.hero h2{margin:13px 0 4px;font-size:22px}.hero>p{margin:0;color:var(--muted);font-size:12px}.shifts{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:19px}.shifts button{display:flex;min-height:70px;align-items:center;gap:9px;padding:11px;border:1px solid var(--line);border-radius:16px;background:rgba(5,17,31,.64);color:var(--muted);text-align:left;cursor:pointer}.shifts button.active{border-color:rgba(56,189,248,.52);background:rgba(15,116,175,.18);color:#e0f2fe}.shifts b{display:grid;width:31px;height:31px;flex:none;place-items:center;border-radius:10px;background:rgba(148,163,184,.1);font-size:17px}.shifts strong,.shifts small{display:block}.shifts strong{font-size:11px}.shifts small{margin-top:3px;color:var(--muted);font-size:8px}
.progress-card{margin:14px 0 27px;padding:17px;border:1px solid var(--line);border-radius:19px;background:rgba(11,26,43,.76)}.progress-card>div{color:var(--muted);font-size:11px}.progress-card>div strong{color:var(--text)}.progress-card>i{display:block;height:7px;margin:11px 0 9px;overflow:hidden;border-radius:20px;background:rgba(148,163,184,.11)}.progress-card>i span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22c9ee,#27d17c);transition:width .4s}.progress-card p{margin:0;color:var(--muted);font-size:10px}.title-row{margin-bottom:13px}.title-row h2{margin:4px 0 0;font-size:18px}.title-row em{padding:6px 9px;border-radius:999px;background:rgba(251,107,114,.13);color:#fda4af;font-size:9px;font-style:normal;font-weight:850}
.line-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.line-card{position:relative;min-height:110px;padding:14px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:rgba(13,29,48,.82);text-align:left;cursor:pointer}.line-card.reported{border-color:rgba(40,209,124,.28);background:linear-gradient(145deg,rgba(13,48,47,.77),rgba(11,28,44,.88))}.line-card code{display:inline-flex;padding:4px 7px;border-radius:8px;background:rgba(56,189,248,.1);color:#7dd3fc;font:900 8px inherit}.line-card strong,.line-card small{display:block}.line-card strong{margin:10px 0 3px;font-size:13px}.line-card small{overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}.line-card mark{position:absolute;right:11px;top:11px;display:grid;width:21px;height:21px;place-items:center;border-radius:50%;background:var(--green);color:#032715;font-size:11px;font-weight:950}.empty{padding:38px 18px;border:1px dashed rgba(148,163,184,.28);border-radius:21px;text-align:center}.state-icon{display:grid;width:58px;height:58px;margin:auto;place-items:center;border-radius:19px;background:rgba(24,160,251,.13);color:#7dd3fc;font-size:26px;font-weight:950}.state-icon.red{background:rgba(251,107,114,.13);color:#fda4af}.red-text{color:#fda4af}.green-text{color:#86efac}
.record-head{align-items:center}.record-head .saved{flex:none;color:#86efac}.record-head .saving{color:#fde68a}.record-head .save-error{color:#fda4af}.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin:24px 0 27px}.steps:before{position:absolute;top:15px;right:16%;left:16%;height:1px;background:rgba(148,163,184,.25);content:""}.steps>span{position:relative;z-index:1;display:grid;justify-items:center;gap:4px;color:#657890}.steps b{display:grid;width:31px;height:31px;place-items:center;border:1px solid rgba(148,163,184,.26);border-radius:50%;background:#0b1a2c;font-size:10px}.steps small{font-size:8px}.steps .active{color:#7dd3fc}.steps .active b{border-color:var(--blue);background:var(--blue);color:white;box-shadow:0 0 0 6px rgba(24,160,251,.12)}.panel{margin-bottom:15px;padding:17px;border:1px solid var(--line);border-radius:21px;background:rgba(11,27,45,.74)}
.status-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.status-option{min-height:78px;padding:11px;border:1px solid var(--line);border-radius:15px;background:rgba(9,23,39,.72);text-align:left;cursor:pointer}.status-option.active{border-color:var(--status);background:color-mix(in srgb,var(--status) 13%,transparent)}.status-option i{display:block;width:10px;height:10px;margin-bottom:9px;border-radius:50%;background:var(--status);box-shadow:0 0 0 5px color-mix(in srgb,var(--status) 13%,transparent)}.status-option strong,.status-option small{display:block}.status-option strong{font-size:11px}.status-option small{margin-top:3px;color:var(--muted);font-size:8px}
.photo-list{display:grid;gap:9px}.photo-topic{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:11px;min-height:71px;padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(8,21,36,.68)}.photo-topic.uploaded{border-color:rgba(40,209,124,.28)}.topic-no{display:grid;width:43px;height:43px;place-items:center;border-radius:13px;background:rgba(56,189,248,.11);color:#7dd3fc;font-size:11px;font-weight:950}.uploaded .topic-no{background:rgba(40,209,124,.13);color:#86efac}.topic-copy strong,.topic-copy small{display:block}.topic-copy strong{font-size:11px}.topic-copy small{margin-top:3px;color:var(--muted);font-size:8px}.required{color:#fda4af}.photo-action{position:relative;display:grid;width:40px;height:40px;place-items:center;overflow:hidden;border:1px solid rgba(56,189,248,.25);border-radius:12px;background:rgba(24,160,251,.13);color:#7dd3fc;font-size:17px}.photo-action input{position:absolute;inset:0;opacity:0}.photo-topic.uploading{opacity:.55}.delete-photo{grid-column:2/4;justify-self:start;padding:0;border:0;background:transparent;color:#fda4af;font-size:9px;font-weight:800;cursor:pointer}
.toggle-card{display:grid;grid-template-columns:43px 1fr;align-items:center;gap:11px;margin-top:12px;padding:13px;border:1px solid var(--line);border-radius:15px;background:rgba(10,23,39,.72);cursor:pointer}.toggle-card input{position:absolute;opacity:0}.toggle-card>i{position:relative;width:42px;height:24px;border-radius:999px;background:#2a3a4d}.toggle-card>i:after{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:white;transition:transform .2s;content:""}.toggle-card input:checked+i{background:var(--blue)}.toggle-card input:checked+i:after{transform:translateX(18px)}.toggle-card strong,.toggle-card small{display:block}.toggle-card strong{font-size:11px}.toggle-card small{margin-top:3px;color:var(--muted);font-size:8px}.actions{display:grid;gap:7px;margin-top:19px}
.summary{overflow:hidden;border:1px solid var(--line);border-radius:23px;background:rgba(11,27,45,.82);box-shadow:0 24px 70px rgba(0,0,0,.3)}.summary-head{padding:19px;border-bottom:1px solid var(--line);background:radial-gradient(circle at 100% 0,rgba(56,189,248,.16),transparent 10rem),rgba(13,36,59,.7)}.summary-head h2{margin:9px 0 2px;font-size:23px}.summary-head p{margin:0;color:var(--muted);font-size:10px}.summary-head>strong{display:grid;min-width:80px;min-height:72px;place-items:center;padding:9px;border:1px solid var(--status);border-radius:16px;background:color-mix(in srgb,var(--status) 13%,transparent);color:var(--status);font-size:11px;text-align:center}.summary dl,.profile-card dl{margin:0;padding:4px 19px}.summary dl div,.profile-card dl div{display:flex;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid var(--line)}.summary dl div:last-child,.profile-card dl div:last-child{border:0}.summary dt,.profile-card dt{color:var(--muted);font-size:10px}.summary dd,.profile-card dd{margin:0;font-size:10px;font-weight:800;text-align:right}.review-photos{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:13px}.review-photos article{padding:11px;border:1px solid var(--line);border-radius:15px;background:rgba(11,27,45,.74)}.review-photos span,.review-photos strong{display:block}.review-photos span{color:#7dd3fc;font-size:8px}.review-photos strong{margin-top:4px;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.success-ring{display:grid;width:96px;height:96px;place-items:center;border:14px solid rgba(40,209,124,.06);border-radius:50%;background:linear-gradient(145deg,#34d399,#059669);box-shadow:0 20px 70px rgba(5,150,105,.2);font-size:29px;font-weight:950}.receipt{display:grid;width:min(100%,390px);gap:4px;margin:23px 0;padding:15px;border:1px dashed rgba(125,211,252,.28);border-radius:15px;background:rgba(24,160,251,.12)}.receipt span{color:var(--muted);font-size:9px}.receipt strong{color:#7dd3fc;font-size:11px;word-break:break-all}.center .btn{width:min(100%,390px)}
.modal{position:fixed;z-index:80;inset:0;display:grid;place-items:end center;padding:20px calc(20px + var(--safe-bottom));background:rgba(1,6,13,.78);backdrop-filter:blur(8px)}.modal>article{position:relative;width:min(100%,460px);padding:23px;border:1px solid rgba(148,163,184,.28);border-radius:25px;background:linear-gradient(160deg,#12253b,#091728);box-shadow:0 30px 100px rgba(0,0,0,.55)}.modal h2{margin:7px 0 8px;font-size:22px}.modal .state-icon{margin:0 0 17px}.modal .primary,.modal .danger{margin-top:17px}.modal .secondary{margin-top:8px}.draft-summary{display:grid;gap:4px;margin-top:16px;padding:13px;border:1px solid var(--line);border-radius:14px;background:rgba(5,17,31,.64)}.draft-summary span{color:var(--muted);font-size:10px}.profile-card{text-align:center}.close{position:absolute;right:14px;top:14px;width:35px;height:35px;border:1px solid var(--line);border-radius:11px;background:rgba(6,18,31,.7);color:var(--muted);font-size:20px}.profile-avatar{display:grid;width:66px;height:66px;margin:0 auto 12px;place-items:center;border-radius:22px;background:linear-gradient(145deg,#0ea5e9,#1757d4);font-weight:950}.toasts{position:fixed;z-index:120;right:15px;bottom:calc(17px + var(--safe-bottom));left:15px;display:grid;justify-items:center;gap:7px;pointer-events:none}.toast{width:min(100%,460px);padding:12px 14px;border:1px solid rgba(148,163,184,.28);border-radius:13px;background:rgba(13,29,48,.97);box-shadow:0 15px 45px rgba(0,0,0,.4);font-size:11px;font-weight:750}.toast.error{border-color:rgba(251,107,114,.3);background:rgba(65,22,31,.97);color:#fecdd3}.toast.success{border-color:rgba(40,209,124,.3);background:rgba(9,51,42,.97);color:#bbf7d0}pre{width:min(100%,520px);max-height:180px;overflow:auto;padding:11px;border:1px solid var(--line);border-radius:12px;background:#020711;color:#fda4af;text-align:left;white-space:pre-wrap}
@media(min-width:620px){.screen{padding-inline:32px}.line-grid{grid-template-columns:repeat(3,1fr)}.modal{place-items:center}.form-stack{grid-template-columns:1fr 1fr}.form-stack>*{grid-column:1/-1}.form-stack>.field:nth-child(1){grid-column:1}.form-stack>.field:nth-child(2){grid-column:2}}@media(max-width:390px){.screen{padding-inline:14px}.topbar{padding-inline:11px}.hero,.panel{padding:14px}.shifts button{padding:8px;gap:6px}.line-card{padding:11px;min-height:102px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}