@import"https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap";:root{font-family:Be Vietnam Pro,sans-serif;color:#132538;background:#ebe8df;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}.app{--paper:#f8f5ec;--paper-2:#fffdf8;--ink:#132538;--muted:#68727a;--line:#d7d2c5;--red:#d93b31;--red-deep:#a92722;--navy:#132538;min-height:100vh;position:relative;overflow:hidden;padding:38px max(28px,calc((100vw - 1220px)/2)) 28px;background:linear-gradient(110deg,#eeeae0,#f8f5ed 53%,#e7e3da);color:var(--ink);transition:.25s}.app:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}.app.dark{--paper:#18232d;--paper-2:#1e2b36;--ink:#f3efe4;--muted:#a5a9a7;--line:#34434c;--navy:#0c1821;background:linear-gradient(120deg,#0c161e,#15232d 58%,#111a20)}.ambient{position:absolute;border-radius:50%;pointer-events:none}.ambient-one{width:420px;height:420px;top:-240px;right:-110px;border:1px solid color-mix(in srgb,var(--red),transparent 55%);box-shadow:0 0 0 70px color-mix(in srgb,var(--red),transparent 95%),0 0 0 140px color-mix(in srgb,var(--red),transparent 97%)}.ambient-two{width:170px;height:170px;left:-120px;top:540px;background:var(--red);opacity:.06}header{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:34px;animation:rise .55s ease both}.brand{display:flex;align-items:center;gap:17px}.logo{display:grid;place-items:center;width:54px;height:62px;clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);color:#fff;background:var(--red);font-size:20px;filter:drop-shadow(0 8px 12px #9d231f35)}.eyebrow,.search-copy>span,.form-heading span,footer span{font-size:9px;letter-spacing:.22em;font-weight:700;color:var(--red)}.brand h1,.form-heading h3{font-family:Fraunces,serif}.brand h1{font-size:31px;line-height:1;margin:4px 0 5px;letter-spacing:-.03em}.brand p,.search small{display:block;color:var(--muted);margin:0;font-size:12px}.header-side,.tools{display:flex;align-items:center}.header-side{gap:18px}.system-status{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.system-status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#2eae70;margin-right:6px;box-shadow:0 0 0 4px #2eae701c}.tools{gap:7px}.tools button{display:grid;place-items:center;width:39px;height:39px;border:1px solid var(--line);background:color-mix(in srgb,var(--paper),transparent 15%);color:var(--ink);cursor:pointer;transition:.2s}.tools button:hover{color:var(--red);border-color:var(--red);transform:translateY(-2px)}.main-nav{position:relative;display:flex;gap:7px;margin:-11px 0 22px;padding:6px;background:color-mix(in srgb,var(--paper),transparent 4%);border:1px solid var(--line);width:max-content;animation:rise .55s .04s ease both}.main-nav a{display:flex;align-items:center;gap:10px;min-width:210px;padding:10px 15px;color:var(--muted);text-decoration:none;border:1px solid transparent;transition:.2s}.main-nav a>svg{font-size:15px}.main-nav a span{display:flex;flex-direction:column;gap:2px}.main-nav b{font-size:11px;color:inherit}.main-nav small{font-size:9px;opacity:.7}.main-nav a:hover{color:var(--red)}.main-nav a.active{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:5px 5px color-mix(in srgb,var(--red),transparent 72%)}.search,form{position:relative;background:var(--paper);border:1px solid var(--line);box-shadow:0 22px 60px #2231420d}.search{min-height:126px;padding:27px 30px 27px 39px;display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;border-left:5px solid var(--red);animation:rise .55s .08s ease both}.search:after{content:"⌕";position:absolute;right:44%;font-family:serif;font-size:100px;line-height:1;color:var(--ink);opacity:.025;transform:rotate(-15deg)}.search-copy{display:flex;flex-direction:column;gap:5px}.search-copy b{font-family:Fraunces,serif;font-size:20px}.searchbox{position:relative;z-index:1;display:flex;width:min(490px,48%)}input,select{width:100%;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);border-radius:0;padding:12px 13px;outline:none;font-size:13px;transition:border .2s,box-shadow .2s}input:focus,select:focus{border-color:var(--red);box-shadow:0 3px color-mix(in srgb,var(--red),transparent 76%)}.searchbox input{border-right:0;padding-left:17px}.searchbox button{border:0;padding:0 22px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.2s}.searchbox button:hover{background:var(--red)}form{padding:0 38px 32px;counter-reset:section;animation:rise .55s .16s ease both}.form-heading{display:flex;align-items:end;justify-content:space-between;margin:0 -38px 28px;padding:25px 38px 22px;background:color-mix(in srgb,var(--paper-2),var(--line) 12%);border-bottom:1px solid var(--line)}.form-heading h3{font-size:23px;margin:3px 0 0}.form-heading p{font-size:10px;color:var(--muted);margin:0}.form-heading b{color:var(--red)}fieldset{border:0;padding:0;margin:0}h2{counter-increment:section;display:flex;align-items:center;gap:11px;font-size:11px;text-transform:uppercase;letter-spacing:.16em;margin:31px 0 16px;color:var(--ink)}h2:before{content:"0" counter(section);display:grid;place-items:center;width:27px;height:27px;background:var(--red);color:#fff;font:700 9px Be Vietnam Pro}h2:after{content:"";height:1px;flex:1;background:var(--line)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px 20px}.field{display:flex;flex-direction:column;gap:7px}.field>span{font-size:10px;font-weight:700;letter-spacing:.035em;color:var(--muted)}input[readonly]{background:color-mix(in srgb,var(--paper),var(--line) 26%);color:var(--muted)}.product-search{position:relative}.product-search>svg{position:absolute;left:15px;top:15px;color:var(--red)}.product-search>input{padding-left:42px}.results{position:absolute;z-index:5;left:0;right:0;top:49px;background:var(--paper-2);border:1px solid var(--line);box-shadow:12px 16px color-mix(in srgb,var(--navy),transparent 86%);max-height:320px;overflow:auto}.results button{display:grid;grid-template-columns:44px 1fr 20px;align-items:center;text-align:left;width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);padding:10px 13px;cursor:pointer}.results button:hover{background:color-mix(in srgb,var(--red),transparent 92%)}.results img,.thumb{width:36px;height:36px;object-fit:cover}.thumb{display:grid;place-items:center;background:var(--navy);color:#fff}.results button>span,.chosen span{display:flex;flex-direction:column}.results small,.chosen small{color:var(--muted);margin-top:2px}.empty{text-align:center;color:var(--muted);border:1px dashed var(--line);padding:24px;margin-top:11px;font-size:12px}.chosen{margin-top:11px;border:1px solid var(--line)}.chosen>div{display:grid;grid-template-columns:1fr 90px 38px;align-items:center;padding:10px 13px;border-bottom:1px solid var(--line)}.chosen>div:last-child{border:0}.chosen input{padding:8px}.chosen button{border:0;background:transparent;color:var(--red);font-size:17px;cursor:pointer}.actions{display:flex;align-items:center;gap:9px;margin:34px -38px -32px;padding:20px 38px;background:var(--navy);color:#fff}.action-hint{margin-right:auto;font-size:10px;opacity:.62}.action-hint svg{margin-right:7px;color:#53d08c}.actions button{border:1px solid #ffffff35;background:transparent;color:#fff;padding:11px 16px;font-size:11px;font-weight:700;cursor:pointer}.actions .primary{background:var(--red);border-color:var(--red);min-width:165px}.actions .primary:hover{background:#ec4a40}.actions .danger{color:#ffaaa4;border-color:#b75953}.actions button:disabled{opacity:.5}.toast{position:fixed;z-index:20;right:25px;top:25px;padding:13px 18px;background:#16845b;color:#fff;box-shadow:9px 9px #0a5e3e38;font-size:12px;animation:slide .3s ease}.toast.error{background:var(--red)}.locked{padding:13px 18px;margin-bottom:12px;border-left:4px solid #2377bd;background:#e5f2ff;color:#185a91;font-size:12px}.locked-form fieldset{opacity:.72}footer{position:relative;display:flex;justify-content:space-between;align-items:center;padding:23px 3px 0;color:var(--muted)}footer p{font-family:Fraunces,serif;font-size:12px;margin:0}footer span{color:var(--muted)}.attendance-page{position:relative;animation:rise .5s .08s ease both}.attendance-hero{display:flex;justify-content:space-between;align-items:end;padding:30px 35px;background:var(--navy);color:#fff;border-left:5px solid var(--red)}.attendance-hero>div:first-child>span{font-size:9px;letter-spacing:.2em;color:#f06c62;font-weight:700}.attendance-hero h2{display:block;font:700 29px Fraunces;text-transform:none;letter-spacing:-.02em;color:#fff;margin:5px 0 4px}.attendance-hero h2:before,.attendance-hero h2:after{display:none}.attendance-hero p{margin:0;color:#ffffff8f;font-size:11px}.attendance-controls{display:flex;align-items:end;gap:8px}.attendance-controls label{display:flex;flex-direction:column;gap:6px;color:#ffffff8f;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.attendance-controls select,.attendance-controls input{width:86px;height:39px;padding:8px;background:#ffffff0e;color:#fff;border-color:#ffffff2c}.attendance-controls select option{color:#172536}.attendance-controls button{height:39px;padding:0 16px;border:0;background:var(--red);color:#fff;font-size:10px;font-weight:700;cursor:pointer}.attendance-controls button svg{margin-right:6px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:18px 0}.stats article{display:flex;align-items:center;gap:14px;padding:20px 22px;background:var(--paper)}.stats article>svg{font-size:19px;color:var(--red)}.stats article span{display:flex;flex-direction:column}.stats small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.stats b{font:700 24px Fraunces;line-height:1.2}.stats .warning>svg,.stats .warning b{color:#d8861e}.attendance-sheet{background:var(--paper);border:1px solid var(--line);box-shadow:0 22px 60px #2231420d}.sheet-toolbar{display:flex;align-items:center;justify-content:space-between;padding:19px 22px;border-bottom:1px solid var(--line)}.sheet-toolbar>div{display:flex;flex-direction:column;gap:3px}.sheet-toolbar b{font:600 16px Fraunces}.sheet-toolbar small{font-size:9px;color:var(--muted)}.sheet-toolbar label{position:relative;width:280px}.sheet-toolbar label svg{position:absolute;left:12px;top:12px;color:var(--muted)}.sheet-toolbar input{padding-left:34px}.table-wrap{overflow:auto;max-height:590px}.table-wrap table{border-collapse:separate;border-spacing:0;min-width:max-content;width:100%;font-size:10px}.table-wrap th{position:sticky;top:0;z-index:3;background:color-mix(in srgb,var(--paper),var(--line) 17%);color:var(--muted);border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:9px 7px;min-width:72px}.table-wrap th b,.table-wrap th small{display:block}.table-wrap th small{font-size:7px;letter-spacing:.1em;margin-top:4px}.table-wrap td{height:48px;text-align:center;border-bottom:1px solid var(--line);border-right:1px solid var(--line);background:var(--paper-2)}.table-wrap td>span{display:inline-block;font-size:9px;padding:0 4px}.table-wrap td>span+span{border-left:1px solid var(--line)}.table-wrap td>i{color:var(--line)}.table-wrap .sticky{position:sticky;left:0;z-index:2}.table-wrap th.sticky{z-index:4}.table-wrap .employee{min-width:230px;text-align:left;padding-left:15px;background:var(--paper)}.table-wrap td.employee{display:flex;align-items:center;gap:10px}.table-wrap td.employee>span:not(.avatar){display:flex;flex-direction:column}.table-wrap td.employee small{color:var(--muted);margin-top:2px}.avatar{display:grid!important;place-items:center;width:27px;height:27px;padding:0!important;background:var(--navy);color:#fff}.table-wrap td.incomplete{background:#fff0df;color:#b6610d}.dark .table-wrap td.incomplete{background:#382a1c;color:#f2a94e}.no-data{text-align:center;padding:45px;color:var(--muted);font-size:12px}@keyframes rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes slide{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:820px){.app{padding:24px 16px}.grid{grid-template-columns:1fr 1fr}.system-status{display:none}.search{align-items:flex-start;flex-direction:column;gap:18px}.searchbox{width:100%}.search:after{right:10%}form{padding-left:24px;padding-right:24px}.form-heading,.actions{margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}.action-hint{display:none}.attendance-hero{align-items:flex-start;flex-direction:column;gap:22px}.stats{grid-template-columns:1fr 1fr}}@media(max-width:540px){.app{padding:18px 10px}.brand h1{font-size:25px}.brand p,.eyebrow{display:none}.logo{width:43px;height:50px}.main-nav{width:100%}.main-nav a{min-width:0;flex:1;padding:9px}.main-nav a small{display:none}.grid{grid-template-columns:1fr}.search{padding:22px 18px;border-left-width:4px}.searchbox button{font-size:0;padding:0 17px}.searchbox button svg{font-size:13px}.form-heading{align-items:flex-start}.form-heading p{display:none}form{padding-left:17px;padding-right:17px}.form-heading{margin-left:-17px;margin-right:-17px;padding-left:17px;padding-right:17px}.actions{margin-left:-17px;margin-right:-17px;padding:16px 17px;flex-wrap:wrap}.actions button{flex:1}.actions .primary{min-width:100%}footer p{display:none}.attendance-hero{padding:24px 18px}.attendance-controls{width:100%;flex-wrap:wrap}.attendance-controls label{flex:1}.attendance-controls select,.attendance-controls input,.attendance-controls button{width:100%}.stats article{padding:15px 12px}.stats b{font-size:20px}.sheet-toolbar{align-items:flex-start;flex-direction:column;gap:12px}.sheet-toolbar label{width:100%}}.attendance-controls button.export-button{background:transparent;border:1px solid #ffffff4a}.attendance-controls button.export-button:hover{background:#ffffff12}.attendance-controls button:disabled{opacity:.55;cursor:wait}.logo{width:66px;height:66px;clip-path:none;border-radius:50%;overflow:hidden;background:#fff;border:1px solid #d9dce3;box-shadow:0 8px 22px #13253822;filter:none}.logo img{display:block;width:100%;height:100%;object-fit:cover}@media(max-width:540px){.logo{width:50px;height:50px}}