:root { --gold:#c79a42; --navy:#20264f; --electric:#6d7de3; --glass:rgba(255,255,255,.82); }
[hidden] { display:none !important; }
.login-message { max-width:700px; padding:30px 34px; border:1px solid rgba(255,255,255,.13); border-radius:16px; background:rgba(11,9,24,.62); box-shadow:0 18px 45px rgba(0,0,0,.24); backdrop-filter:blur(8px); }
.login-message h1 { color:#fff; font-weight:800; text-shadow:0 3px 18px rgba(0,0,0,.85); }
.login-message p { color:rgba(255,255,255,.9); text-shadow:0 2px 10px rgba(0,0,0,.5); }
.employee-row { grid-template-columns:44px minmax(150px,1fr) auto auto auto auto; }
@media(max-width:1000px) { .employee-row { grid-template-columns:42px 1fr auto; } .employee-row>*:nth-child(n+4) { grid-column:auto; } }
@media(max-width:650px) { .employee-row { grid-template-columns:42px 1fr; } .employee-row>*:nth-child(n+3) { grid-column:2; } }
.notification-button { border:1px solid rgba(75,57,130,.2); background:#fff; color:var(--brand); border-radius:7px; padding:9px 12px; font-weight:800; cursor:pointer; }
.notification-button b { display:inline-grid; place-items:center; min-width:20px; height:20px; margin-left:5px; padding:0 5px; border-radius:99px; background:var(--gold); color:#fff; font-size:10px; }
.notification-panel { position:absolute; z-index:40; right:46px; top:92px; width:min(430px,calc(100vw - 32px)); padding:22px; border:1px solid rgba(48,56,108,.14); border-radius:14px; background:rgba(255,255,255,.96); box-shadow:0 24px 60px rgba(30,25,55,.25); backdrop-filter:blur(14px); }
.notification-item { display:grid; grid-template-columns:10px 1fr; gap:11px; align-items:start; padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; line-height:1.6; }
.notification-item:before { content:""; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--brand2); }
.notification-item.high:before { background:#c45a45; box-shadow:0 0 0 4px rgba(196,90,69,.1); }
.notification-item.low:before { background:#a4a8b8; }
body { background:#f3f4f9; min-height:100vh; }
.ambient-scene { position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:0; background:linear-gradient(135deg,#f7f8fc 0%,#eef1fa 52%,#f7f4ee 100%); }
.ambient-orb { position:absolute; border-radius:50%; filter:blur(2px); opacity:.62; animation:ambientDrift 16s ease-in-out infinite alternate; }
.orb-one { width:620px; height:620px; right:-180px; top:-260px; background:radial-gradient(circle at 35% 35%,rgba(109,125,227,.24),rgba(48,56,108,.08) 46%,transparent 70%); }
.orb-two { width:520px; height:520px; left:15%; bottom:-340px; animation-duration:20s; animation-delay:-6s; background:radial-gradient(circle,rgba(199,154,66,.18),rgba(199,154,66,.04) 52%,transparent 72%); }
.paint-texture { position:absolute; inset:0; opacity:.22; background-image:linear-gradient(105deg,transparent 0 46%,rgba(255,255,255,.65) 47%,transparent 48%),repeating-linear-gradient(90deg,rgba(48,56,108,.025) 0 1px,transparent 1px 72px); mask-image:linear-gradient(to bottom,black,transparent 78%); }
.app { position:relative; z-index:1; }
.side { border-right:1px solid rgba(255,255,255,.72); box-shadow:18px 0 54px rgba(33,38,79,.1); background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,249,253,.88)); backdrop-filter:blur(18px); }
.side::before { content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,var(--brand),var(--gold)); }
.logo { filter:drop-shadow(0 8px 12px rgba(25,29,60,.08)); }
.product { border-left:3px solid var(--gold); padding-left:10px; color:var(--brand); font-weight:800; }
.brand-rail { margin:0 7px 26px; padding:14px; border-radius:10px; overflow:hidden; position:relative; color:#fff; background:linear-gradient(135deg,var(--navy),#3d477f); box-shadow:0 14px 28px rgba(32,38,79,.18); }
.brand-rail::after { content:""; position:absolute; width:90px; height:140px; right:-42px; top:-58px; border:18px solid rgba(255,255,255,.08); border-radius:50%; transform:rotate(-14deg); }
.brand-rail span { display:block; font-size:8px; letter-spacing:.22em; color:#d3b46f; margin-bottom:7px; }
.brand-rail strong { display:block; font-size:13px; letter-spacing:.03em; }
.side nav button { position:relative; transition:background .25s ease,color .25s ease,transform .25s ease,padding .25s ease; }
.side nav button::after { content:""; position:absolute; left:0; top:50%; width:3px; height:0; border-radius:4px; background:linear-gradient(var(--gold),var(--brand)); transform:translateY(-50%); transition:height .25s ease; }
.side nav button.active { padding-left:20px; transform:translateX(3px); box-shadow:inset 0 0 0 1px rgba(48,56,108,.04); }
.side nav button.active::after { height:24px; }
main::before { content:"SATO KOGYO  ·  PEOPLE & FIELD"; display:block; max-width:1160px; margin:0 auto 18px; color:#8c90a1; font-size:10px; letter-spacing:.22em; }
.view.view-entering { animation:viewReveal .55s cubic-bezier(.2,.8,.2,1) both; }
.view>header { position:relative; padding-bottom:18px; border-bottom:1px solid rgba(48,56,108,.13); }
.view>header::after { content:""; position:absolute; left:0; bottom:-1px; width:64px; height:3px; background:linear-gradient(90deg,var(--brand),var(--gold)); }
h1 { letter-spacing:-.035em; color:#1f2344; text-shadow:0 1px 0 rgba(255,255,255,.8); }
.tag { border-color:rgba(199,154,66,.45); background:#fff8e9; color:#755419; font-weight:800; letter-spacing:.08em; }
.card,.stats article,.meeting-row { border-color:rgba(48,56,108,.1); background:var(--glass); backdrop-filter:blur(12px); box-shadow:0 12px 34px rgba(31,35,68,.07),inset 0 1px 0 rgba(255,255,255,.82); transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.card:hover { border-color:rgba(48,56,108,.2); box-shadow:0 18px 42px rgba(31,35,68,.1),inset 0 1px 0 #fff; }
.primary { position:relative; overflow:hidden; background:linear-gradient(135deg,var(--brand),#46528f); box-shadow:0 7px 16px rgba(48,56,108,.2); transition:transform .2s ease,box-shadow .2s ease; }
.primary::after { content:""; position:absolute; inset:-40% auto -40% -45%; width:28%; transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent); transition:left .55s ease; }
.primary:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(48,56,108,.28); }
.primary:hover::after { left:120%; }
.stats article { position:relative; overflow:hidden; }
.stats article::after { content:""; position:absolute; right:-20px; bottom:-34px; width:78px; height:78px; border:14px solid rgba(48,56,108,.045); border-radius:50%; }
.stats article strong { background:linear-gradient(135deg,var(--brand),var(--electric)); background-clip:text; -webkit-background-clip:text; color:transparent; }
.avatar { background:linear-gradient(145deg,var(--brand),#6974ae); color:#fff; box-shadow:0 6px 12px rgba(48,56,108,.2); }
.calendar-card { background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(248,249,255,.78)); }
.record-state { font-variant-numeric:tabular-nums; font-weight:900; letter-spacing:.08em; }
.loading { position:relative; overflow:hidden; border-color:rgba(109,125,227,.22); background:linear-gradient(120deg,rgba(255,255,255,.9),rgba(238,241,255,.9),rgba(255,248,233,.85)); box-shadow:0 22px 60px rgba(48,56,108,.11); }
.loading::before { content:""; display:inline-block; width:11px; height:11px; margin-right:12px; border:2px solid rgba(48,56,108,.2); border-top-color:var(--brand); border-radius:50%; vertical-align:-1px; animation:spin .85s linear infinite; }
.loading::after { content:""; position:absolute; inset:0; transform:translateX(-105%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.64),transparent); animation:analysisSweep 1.8s ease-in-out infinite; }
.transcript-line { animation:lineArrive .38s ease both; }
.status-dot { box-shadow:0 0 0 0 rgba(70,162,109,.4); animation:statusPulse 2.2s ease-out infinite; }
@keyframes ambientDrift { from{transform:translate3d(-18px,-10px,0) scale(.98)} to{transform:translate3d(24px,20px,0) scale(1.06)} }
@keyframes viewReveal { from{opacity:0;transform:translateY(16px);filter:blur(3px)} to{opacity:1;transform:none;filter:none} }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes analysisSweep { 55%,100%{transform:translateX(105%)} }
@keyframes lineArrive { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes statusPulse { 70%{box-shadow:0 0 0 7px rgba(70,162,109,0)} 100%{box-shadow:0 0 0 0 rgba(70,162,109,0)} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; } }
@media(max-width:850px) { .brand-rail{display:none}.ambient-orb{opacity:.35} }
@media print { .ambient-scene,.side,.actions,.employee-tools,.engine,main::before { display:none!important } .app{display:block}.view{display:none!important}.view#records{display:block!important;max-width:none}.records-layout{grid-template-columns:1fr}.record-list{display:none}.record-detail{box-shadow:none;border:0} main{padding:0} }