/* ═══════════════════════════════════════════════════════════════ Tiras · Rate Inquiry — mobile-first, animated, 3 skins Builds on styles.css tokens. Skin via [data-skin] on . ═══════════════════════════════════════════════════════════════ */ :root { --ease-spring: cubic-bezier(.22,1,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --wz-radius: 22px; --wz-card-bg: color-mix(in oklab, var(--surface) 90%, transparent); --wz-card-border: var(--border); --wz-card-shadow: var(--shadow-lg); --sky-a: #cfeeff; --sky-b: #eaf7f5; --sea: #1ea399; --sea-2:#0e6d67; --ground:#e8efe6; --page-1: color-mix(in oklab, var(--teal-500) 20%, transparent); --page-2: color-mix(in oklab, var(--teal-600) 14%, transparent); } /* ── Skins ──────────────────────────────────────────────────── */ html[data-skin="aurora"] { --wz-radius: 24px; --wz-card-bg: color-mix(in oklab, var(--surface) 78%, transparent); --wz-card-border: color-mix(in oklab, var(--primary) 24%, var(--border)); --wz-card-shadow: 0 20px 60px -18px rgba(10,40,60,.5); --page-1: color-mix(in oklab, #3f6ef2 42%, transparent); --page-2: color-mix(in oklab, var(--teal-500) 40%, transparent); --sky-a:#17275e; --sky-b:#123a66; } html[data-skin="paper"] { --wz-radius: 14px; --wz-card-bg: var(--surface); --wz-card-border: var(--border-strong); --wz-card-shadow: 0 2px 10px rgba(13,24,32,.05); --page-1: color-mix(in oklab, var(--teal-500) 8%, transparent); --page-2: color-mix(in oklab, var(--teal-600) 6%, transparent); --sky-a:#eef3f6; --sky-b:#f6f9fb; } /* ── Root & backdrop ────────────────────────────────────────── */ .inq-root { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); position: relative; overflow-x: hidden; } .inq-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(1100px 640px at 82% -10%, var(--page-1), transparent 60%), radial-gradient(900px 560px at 6% 110%, var(--page-2), transparent 60%); } html[data-skin="aurora"] .inq-bg { background: radial-gradient(900px 620px at 78% -6%, var(--page-1), transparent 58%), radial-gradient(820px 560px at 10% 108%, var(--page-2), transparent 60%), linear-gradient(160deg, #0a1428, #0a1a34 60%, #0b2444); } .inq-bg::before { content:""; position:absolute; inset:-2px; background-image: linear-gradient(color-mix(in oklab, var(--primary) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in oklab, var(--primary) 7%, transparent) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(circle at 50% 35%, #000 30%, transparent 78%); opacity:.5; } html[data-skin="paper"] .inq-bg::before { opacity:.7; background-size:24px 24px; background-image: radial-gradient(color-mix(in oklab, var(--primary) 12%, transparent) 1px, transparent 1.4px); } .inq-orb { position:absolute; border-radius:50%; filter: blur(3px); opacity:.4; background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--teal-300) 70%, transparent), transparent 70%); animation: orbFloat 18s var(--ease-out) infinite alternate; } html[data-skin="aurora"] .inq-orb { opacity:.6; filter: blur(8px); } html[data-skin="paper"] .inq-orb { display:none; } .inq-orb.a{width:150px;height:150px;top:12%;left:8%;animation-delay:-3s} .inq-orb.b{width:100px;height:100px;top:60%;left:85%;animation-delay:-8s} .inq-orb.c{width:64px;height:64px;top:80%;left:20%;animation-delay:-12s} @keyframes orbFloat{0%{transform:translate(0,0) scale(1)}100%{transform:translate(26px,-32px) scale(1.14)}} /* ── Top bar (mobile-first) ─────────────────────────────────── */ .inq-top { position:relative; z-index:4; display:flex; align-items:center; gap:10px; padding:12px 14px; flex-wrap:wrap; } .inq-brand { display:flex; align-items:center; gap:10px; } .inq-brand .brand-mark { width:38px; height:38px; font-size:16px; border-radius:11px; } .inq-brand-name { font-weight:800; font-size:16px; letter-spacing:.2px; } .inq-brand-sub { font-size:11px; color:var(--text-muted); margin-top:1px; } .inq-top-spacer { flex:1; } .inq-top-pill { display:none; align-items:center; gap:7px; white-space:nowrap; font-size:12px; font-weight:700; color:var(--primary); background:var(--primary-soft); border:1px solid color-mix(in oklab, var(--primary) 26%, transparent); padding:6px 13px; border-radius:999px; } .inq-top-pill .pdot{width:7px;height:7px;border-radius:50%;background:var(--teal-500);animation:pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--teal-500) 65%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}} .inq-viewtoggle { display:flex; gap:3px; padding:3px; background:var(--surface); border:1px solid var(--border); border-radius:999px; box-shadow:var(--shadow-sm); } .inq-viewtoggle button { border:none; background:transparent; font-family:inherit; font-size:12.5px; font-weight:700; color:var(--text-muted); padding:8px 13px; border-radius:999px; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; gap:6px; min-height:38px; transition:color .15s, background .15s; } .inq-viewtoggle button.on { background:var(--primary); color:var(--primary-text); box-shadow:var(--shadow-sm); } .inq-viewtoggle button:not(.on):hover { color:var(--text); background:var(--surface-hover); } .inq-lang { display:flex; padding:2px; background:var(--surface); border:1px solid var(--border); border-radius:999px; } .inq-lang button { border:none; background:transparent; padding:6px 11px; font-size:11px; font-weight:800; color:var(--text-muted); border-radius:999px; cursor:pointer; font-family:inherit; min-height:34px; } .inq-lang button.on { background:var(--primary-soft); color:var(--primary); } /* skin switch */ .inq-skins { display:flex; gap:5px; } .inq-skins button { width:26px; height:26px; border-radius:50%; border:2px solid var(--border); cursor:pointer; padding:0; position:relative; } .inq-skins button.on { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); } .inq-skins .s-ocean{ background:linear-gradient(135deg,#1ea399,#0e6d67);} .inq-skins .s-aurora{background:linear-gradient(135deg,#3f6ef2,#1ea399);} .inq-skins .s-paper{background:linear-gradient(135deg,#f6f9fb,#d4dbe2);} @media (min-width:720px){ .inq-top{padding:16px 26px; gap:12px} .inq-top-pill{display:inline-flex} .inq-viewtoggle button{font-size:13px} } /* ── Wizard frame (mobile-first) ────────────────────────────── */ .wz-wrap { position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; padding:6px 12px 18px; width:100%; } .wz-card { width:100%; max-width:820px; background:var(--wz-card-bg); backdrop-filter:blur(16px) saturate(120%); -webkit-backdrop-filter:blur(16px) saturate(120%); border:1px solid var(--wz-card-border); border-radius:var(--wz-radius); box-shadow:var(--wz-card-shadow); overflow:hidden; display:flex; flex-direction:column; flex:1; } @media (min-width:720px){ .wz-wrap{padding:10px 20px 40px} .wz-card{flex:initial} } .wz-progress { padding:16px 16px 0; } @media (min-width:720px){ .wz-progress{padding:20px 26px 0} } .wz-progress-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; } .wz-step-label { font-size:12px; font-weight:700; color:var(--text-muted); letter-spacing:.3px; display:flex; align-items:center; gap:7px; } .wz-step-label .num { width:22px;height:22px;border-radius:50%;background:var(--primary);color:var(--primary-text);display:grid;place-items:center;font-size:11px;font-weight:800; } .wz-step-count { font-size:12px; font-weight:800; color:var(--primary); font-variant-numeric:tabular-nums; } .wz-bar { height:6px; border-radius:999px; background:var(--bg-sunken); overflow:hidden; } .wz-bar-fill { height:100%; border-radius:999px; background:linear-gradient(90deg,var(--teal-500),var(--teal-600)); box-shadow:0 0 12px color-mix(in oklab,var(--teal-500) 55%,transparent); transition:width .55s var(--ease-spring); position:relative; } .wz-bar-fill::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:shimmer 1.8s infinite; } @keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(220%)}} .wz-dots{ display:flex; gap:5px; margin-top:12px; } .wz-dot{ flex:1; height:4px; border-radius:999px; background:var(--border-strong); transition:background .4s, transform .4s; } .wz-dot.done{background:var(--teal-500)} .wz-dot.current{background:var(--primary); transform:scaleY(1.7)} .wz-body { padding:18px 16px; flex:1; } @media (min-width:720px){ .wz-body{padding:24px 26px; min-height:400px} } .wz-eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--primary); letter-spacing:.4px; text-transform:uppercase; margin-bottom:8px; } .wz-title{ font-size:22px; font-weight:800; letter-spacing:-.3px; margin:0 0 6px; line-height:1.25; } .wz-sub{ font-size:14px; color:var(--text-muted); margin:0 0 20px; line-height:1.55; } @media (min-width:720px){ .wz-title{font-size:27px} } /* footer nav — sticky on mobile for thumb reach */ .wz-foot { display:flex; align-items:center; gap:10px; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--border); background:color-mix(in oklab,var(--surface) 88%,transparent); position:sticky; bottom:0; backdrop-filter:blur(8px); } @media (min-width:720px){ .wz-foot{padding:18px 26px; position:static} } .wz-foot .spacer{flex:1} .wz-back{ display:inline-flex; align-items:center; gap:6px; background:transparent; border:none; color:var(--text-muted); font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; padding:12px; border-radius:12px; min-height:48px; } .wz-back:hover{ background:var(--surface-hover); color:var(--text); } .wz-next{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg,var(--teal-500),var(--teal-700)); color:#fff; border:none; font-family:inherit; font-size:15px; font-weight:800; padding:14px 24px; border-radius:14px; cursor:pointer; min-height:52px; box-shadow:0 10px 24px -8px color-mix(in oklab,var(--primary) 72%,transparent); transition:transform .18s var(--ease-spring), box-shadow .18s, filter .15s; } .wz-next:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.08); box-shadow:0 14px 30px -8px color-mix(in oklab,var(--primary) 78%,transparent); } .wz-next:active:not(:disabled){ transform:translateY(0) scale(.98); } .wz-next:disabled{ opacity:.45; cursor:not-allowed; box-shadow:none; } .wz-next.grow{ flex:1; } html[dir="rtl"] .flip{ transform:scaleX(-1); } /* step transition */ .stp-enter-fwd{ animation:stpInFwd .5s var(--ease-out) both; } .stp-enter-back{ animation:stpInBack .5s var(--ease-out) both; } @keyframes stpInFwd{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:translateX(0)}} @keyframes stpInBack{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:translateX(0)}} html[dir="rtl"] .stp-enter-fwd{animation-name:stpInFwdR} html[dir="rtl"] .stp-enter-back{animation-name:stpInBackR} @keyframes stpInFwdR{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:translateX(0)}} @keyframes stpInBackR{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:translateX(0)}} .rise{ animation:rise .5s var(--ease-out) both; } @keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} /* ── Option cards ───────────────────────────────────────────── */ .opt-grid{ display:grid; gap:10px; } .opt-grid.cols-2{ grid-template-columns:1fr 1fr; } .opt-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; } @media (max-width:420px){ .opt-grid.cols-3{grid-template-columns:1fr 1fr} } .opt{ position:relative; text-align:start; background:var(--surface); border:1.5px solid var(--border-strong); border-radius:16px; padding:16px; cursor:pointer; font-family:inherit; color:var(--text); min-height:64px; transition:transform .2s var(--ease-spring), border-color .18s, box-shadow .2s, background .18s; overflow:hidden; } .opt:hover{ transform:translateY(-3px); border-color:color-mix(in oklab,var(--primary) 50%,var(--border-strong)); box-shadow:var(--shadow-md); } .opt.sel{ border-color:var(--primary); background:var(--primary-soft); box-shadow:0 10px 26px -10px color-mix(in oklab,var(--primary) 60%,transparent); } .opt-ico{ width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:var(--bg-sunken); color:var(--primary); margin-bottom:12px; transition:.2s; } .opt.sel .opt-ico{ background:var(--primary); color:var(--primary-text); transform:scale(1.06); } .opt-name{ font-weight:800; font-size:15px; } .opt-desc{ font-size:12px; color:var(--text-muted); margin-top:3px; line-height:1.5; } .opt-check{ position:absolute; top:12px; inset-inline-end:12px; width:24px; height:24px; border-radius:50%; background:var(--primary); color:var(--primary-text); display:grid; place-items:center; transform:scale(0) rotate(-45deg); transition:transform .3s var(--ease-spring); } .opt.sel .opt-check{ transform:scale(1) rotate(0); } .opt.tile{ padding:16px 10px; text-align:center; } .opt.tile .opt-ico{ margin:0 auto 8px; } /* animated mode illustration corner */ .opt .mini-anim{ position:absolute; inset-inline-end:-8px; top:-6px; width:78px; height:78px; opacity:.12; color:var(--primary); pointer-events:none; } .opt.sel .mini-anim{ opacity:.22; } /* ── Route scenes ───────────────────────────────────────────── */ .scene{ position:relative; height:190px; border-radius:18px; overflow:hidden; margin:2px 0 20px; border:1px solid var(--border); background:linear-gradient(180deg,var(--sky-a),var(--sky-b)); } @media (max-width:520px){ .scene{ height:158px; } } .scene .ep{ position:absolute; bottom:12px; width:40%; text-align:center; z-index:4; } .scene .ep-a{ right:8px; } .scene .ep-b{ left:8px; } .ep-badge{ width:34px; height:34px; border-radius:50%; background:var(--surface); border:2px solid var(--primary); color:var(--primary); display:grid; place-items:center; margin:0 auto 5px; box-shadow:var(--shadow-sm); } .ep-b .ep-badge{ background:var(--primary); color:var(--primary-text); } .ep-name{ font-size:12px; font-weight:800; color:var(--gray-900); background:color-mix(in oklab,#fff 72%,transparent); border-radius:7px; padding:1px 6px; display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html[data-skin="aurora"] .ep-name, html[data-theme="dark"] .ep-name{ color:#fff; background:color-mix(in oklab,#000 40%,transparent); } .ep-tag{ font-size:9.5px; font-weight:700; color:var(--gray-700); letter-spacing:.5px; margin-top:2px; opacity:.8; } html[data-skin="aurora"] .ep-tag, html[data-theme="dark"] .ep-tag{ color:#dfecef; } /* clouds */ .cloud{ position:absolute; border-radius:999px; background:rgba(255,255,255,.85); filter:blur(1px); z-index:1; } .cloud::before,.cloud::after{ content:""; position:absolute; border-radius:50%; background:inherit; } .scene .cl1{ width:52px; height:16px; top:22px; left:-60px; animation:cloud 16s linear infinite; } .scene .cl2{ width:40px; height:13px; top:44px; left:-60px; animation:cloud 22s linear infinite 4s; } .scene .cl3{ width:60px; height:18px; top:16px; left:-70px; animation:cloud 19s linear infinite 8s; } .cloud.cl1::before{ width:22px;height:22px;top:-9px;left:8px } .cloud.cl2::before{ width:18px;height:18px;top:-7px;left:6px } .cloud.cl3::before{ width:26px;height:26px;top:-11px;left:10px } @keyframes cloud{ from{ transform:translateX(0) } to{ transform:translateX(560px) } } html[data-skin="aurora"] .cloud{ background:rgba(255,255,255,.16) } /* waves */ .waves{ position:absolute; left:0; right:0; bottom:0; width:100%; height:60px; z-index:2; overflow:visible; } .wave{ fill:var(--sea); } .scene-sea .wave.w1{ fill:var(--sea); opacity:.95 } .scene-sea .wave.w2{ fill:var(--sea-2); opacity:.55 } .scene-sea .wave.w3{ fill:var(--sea-2); opacity:.3 } .scene-sea .wave{ animation:waveShift 6s ease-in-out infinite alternate; } .scene-sea .wave.w2{ animation-duration:8s } .scene-sea .wave.w3{ animation-duration:10s } @keyframes waveShift{ from{ transform:translateX(0) } to{ transform:translateX(-40px) } } .veh text{ transform:scaleX(-1); transform-box:fill-box; transform-origin:center; } /* ground / road (land) */ .scene-land{ } .scene-land .hills{ position:absolute; left:-5%; right:-5%; bottom:34px; height:70px; z-index:1; background:radial-gradient(60px 40px at 20% 100%, color-mix(in oklab,var(--teal-500) 30%,transparent), transparent 70%), radial-gradient(80px 50px at 60% 100%, color-mix(in oklab,var(--teal-600) 26%,transparent), transparent 70%), radial-gradient(70px 44px at 90% 100%, color-mix(in oklab,var(--teal-500) 24%,transparent), transparent 70%); } .scene-land .road{ position:absolute; left:0; right:0; bottom:0; height:44px; z-index:2; background:linear-gradient(180deg, #55636e, #3a454e); } .scene-land .road-dash{ position:absolute; top:50%; left:0; right:-60px; height:4px; transform:translateY(-50%); background:repeating-linear-gradient(90deg, #f6c945 0 26px, transparent 26px 52px); animation:roadDash .5s linear infinite; } @keyframes roadDash{ from{ transform:translateY(-50%) translateX(0) } to{ transform:translateY(-50%) translateX(-52px) } } /* vehicles — travel right → left, nose/bow/cab leading (left) */ .veh{ position:absolute; z-index:3; } .ship-veh{ bottom:26px; left:5%; animation:sail 6.5s ease-in-out infinite, bob 2.6s ease-in-out infinite; } @keyframes sail{ 0%{left:74%;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:6%;opacity:0} } @keyframes bob{ 0%,100%{ transform:scaleX(-1) scale(var(--vscale,1)) translateY(0) rotate(-1.5deg) } 50%{ transform:scaleX(-1) scale(var(--vscale,1)) translateY(-5px) rotate(1.5deg) } } .truck-veh{ bottom:20px; left:5%; transform:scaleX(-1); animation:drive 5.5s linear infinite; } @keyframes drive{ 0%{left:72%;opacity:0} 7%{opacity:1} 93%{opacity:1} 100%{left:4%;opacity:0} } .truck-veh .wheel{ transform-box:fill-box; transform-origin:center; animation:spin .55s linear infinite; } @keyframes spin{ to{ transform:rotate(360deg) } } .plane-veh{ top:30px; left:5%; animation:fly 6s ease-in-out infinite; } @keyframes fly{ 0%{left:74%; transform:scaleX(-1) translateY(14px); opacity:0} 10%{opacity:1} 50%{transform:scaleX(-1) translateY(-6px)} 90%{opacity:1} 100%{left:5%; transform:scaleX(-1) translateY(10px); opacity:0} } .contrail{ position:absolute; top:50%; right:100%; width:64px; height:4px; transform:translateY(-50%); border-radius:999px; background:linear-gradient(to left, rgba(255,255,255,.85), transparent); } /* operator (suggest) scene */ .scene-op{ display:flex; align-items:center; justify-content:center; } .op-center{ position:relative; width:112px; height:112px; display:grid; place-items:center; margin-top:-30px; } .op-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--primary); opacity:0; animation:ringOut 2.4s var(--ease-out) infinite; } .op-ring.r2{ animation-delay:.6s } .op-ring.r3{ animation-delay:1.2s } .op-avatar{ width:86px; height:86px; border-radius:50%; background:var(--surface); border:2.5px solid var(--primary); display:grid; place-items:center; box-shadow:var(--shadow-md); position:relative; z-index:2; overflow:hidden; } .op-sat{ position:absolute; width:40px; height:40px; border-radius:12px; background:var(--surface); border:1.5px solid var(--border-strong); color:var(--primary); display:grid; place-items:center; box-shadow:var(--shadow-sm); animation:satBob 2.6s ease-in-out infinite; z-index:2; } .op-sat.s1{ left:16%; top:24% } .op-sat.s2{ right:16%; top:18%; animation-delay:.5s } .op-sat.s3{ left:26%; bottom:26%; animation-delay:1s } @keyframes satBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} } .op-cap{ position:absolute; bottom:12px; left:0; right:0; text-align:center; font-size:13px; font-weight:700; color:var(--text); display:flex; align-items:center; justify-content:center; padding:0 12px; } .op-dots{ display:inline-flex; gap:3px; margin-inline-start:5px; } .op-dots i{ width:5px; height:5px; border-radius:50%; background:var(--primary); animation:dotBlink 1.2s infinite; } .op-dots i:nth-child(2){ animation-delay:.2s } .op-dots i:nth-child(3){ animation-delay:.4s } @keyframes dotBlink{ 0%,80%,100%{opacity:.25; transform:scale(.8)} 40%{opacity:1; transform:scale(1.2)} } /* ── Location picker ────────────────────────────────────────── */ .loc-row{ display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:end; } @media (max-width:520px){ .loc-row{ grid-template-columns:1fr; } .loc-swap{ display:none } } .loc-field label{ font-size:12.5px; font-weight:700; color:var(--text); display:block; margin-bottom:6px; } .loc-btn{ width:100%; text-align:start; font-family:inherit; background:var(--surface); border:1.5px solid var(--border-strong); border-radius:13px; padding:12px 14px; cursor:pointer; min-height:56px; display:flex; align-items:center; gap:11px; color:var(--text); transition:border-color .15s, box-shadow .15s; } .loc-btn:hover{ border-color:var(--primary); } .loc-btn.filled{ border-color:var(--primary); background:var(--primary-soft); } .loc-btn .li{ width:36px; height:36px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--bg-sunken); color:var(--primary); } .loc-btn.filled .li{ background:var(--primary); color:var(--primary-text); } .loc-btn .lt{ min-width:0; } .loc-btn .lname{ font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .loc-btn .lsub{ font-size:11.5px; color:var(--text-muted); } .loc-btn .lph{ color:var(--text-faint); font-weight:600; font-size:14px; } .loc-swap{ align-self:end; margin-bottom:6px; } .loc-swap button{ width:44px; height:44px; border-radius:12px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--primary); cursor:pointer; display:grid; place-items:center; } .loc-swap button:hover{ background:var(--primary-soft); } /* picker sheet */ .pick-back{ position:fixed; inset:0; z-index:900; background:rgba(13,24,32,.45); backdrop-filter:blur(3px); display:flex; align-items:flex-end; justify-content:center; animation:fadeIn .2s; } @media (min-width:640px){ .pick-back{ align-items:center; padding:20px } } @keyframes fadeIn{ from{opacity:0} to{opacity:1} } .pick{ width:100%; max-width:560px; max-height:82vh; background:var(--surface); border:1px solid var(--border); border-radius:20px 20px 0 0; box-shadow:var(--shadow-pop); display:flex; flex-direction:column; overflow:hidden; animation:sheetUp .32s var(--ease-out) both; } @media (min-width:640px){ .pick{ border-radius:18px; animation:pop .3s var(--ease-spring) both } } @keyframes sheetUp{ from{ transform:translateY(100%) } to{ transform:translateY(0) } } .pick-hd{ padding:14px 16px 10px; border-bottom:1px solid var(--border); } .pick-grab{ width:40px; height:4px; border-radius:999px; background:var(--border-strong); margin:0 auto 12px; } @media (min-width:640px){ .pick-grab{ display:none } } .pick-title{ font-weight:800; font-size:16px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; } .pick-search{ display:flex; align-items:center; gap:9px; background:var(--bg); border:1.5px solid var(--border-strong); border-radius:12px; padding:11px 13px; } .pick-search input{ border:none; background:transparent; outline:none; flex:1; font-family:inherit; font-size:15px; color:var(--text); } .pick-body{ overflow-y:auto; overflow-x:hidden; padding:8px; flex:1; } .pick-group{ font-size:11px; font-weight:800; color:var(--text-faint); text-transform:uppercase; letter-spacing:.6px; padding:12px 10px 6px; display:flex; align-items:center; gap:8px; } .pick-group .cc{ font-size:9px; background:var(--surface-hover); color:var(--text-muted); padding:1px 6px; border-radius:5px; letter-spacing:.5px; } .pick-item{ width:100%; text-align:start; font-family:inherit; display:flex; align-items:center; gap:12px; padding:12px 11px; border-radius:12px; border:none; background:transparent; cursor:pointer; color:var(--text); min-height:52px; } .pick-item:hover{ background:var(--primary-soft); } .pick-item .pii{ width:34px; height:34px; border-radius:9px; flex:none; display:grid; place-items:center; background:var(--bg-sunken); color:var(--primary); } .pick-item .pin-name{ font-weight:700; font-size:14px; } .pick-item .pin-type{ font-size:11px; color:var(--text-muted); margin-top:1px; } .pick-empty{ text-align:center; color:var(--text-faint); padding:30px; font-size:13px; } /* ── Fields ─────────────────────────────────────────────────── */ .field-col{ display:flex; flex-direction:column; gap:14px; } .field-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .field-2 .wz-field>label{ min-height:40px; } @media (max-width:520px){ .field-2{ grid-template-columns:1fr } .field-2 .wz-field>label{ min-height:0 } } .wz-field{ display:flex; flex-direction:column; gap:7px; } .wz-field>label{ font-size:12.5px; font-weight:700; color:var(--text); display:flex; align-items:center; justify-content:space-between; gap:8px; } .wz-field .hint{ font-size:11px; color:var(--text-faint); font-weight:500; } .wz-input,.wz-select,.wz-textarea{ font-family:inherit; font-size:15px; padding:13px 14px; border-radius:13px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--text); outline:none; width:100%; min-height:50px; transition:border-color .16s, box-shadow .16s; } .wz-input:focus,.wz-select:focus,.wz-textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-soft); } .wz-textarea{ resize:vertical; min-height:76px; line-height:1.6; } .wz-input.big{ font-size:24px; font-weight:800; padding:16px; } .wz-affix{ position:relative; } .wz-affix .aff{ position:absolute; inset-inline-end:14px; top:50%; transform:translateY(-50%); font-size:13px; font-weight:700; color:var(--text-muted); pointer-events:none; } .unit-seg{ display:inline-flex; gap:2px; padding:3px; background:var(--bg-sunken); border-radius:9px; } .unit-seg button{ border:none; background:transparent; font-family:inherit; font-size:12px; font-weight:800; color:var(--text-muted); padding:6px 12px; border-radius:7px; cursor:pointer; min-height:34px; } .unit-seg button.on{ background:var(--surface); color:var(--primary); box-shadow:var(--shadow-sm); } /* value + currency */ .value-row{ display:grid; grid-template-columns:1fr auto; gap:10px; align-items:stretch; } .cur-seg{ display:flex; flex-direction:column; gap:4px; } .cur-pop{ position:relative; } .cur-btn{ height:100%; min-height:58px; display:flex; align-items:center; gap:8px; padding:0 16px; border-radius:13px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--text); font-family:inherit; font-weight:800; font-size:15px; cursor:pointer; } .cur-btn:hover{ border-color:var(--primary); } .cur-menu{ position:absolute; top:calc(100% + 6px); inset-inline-end:0; z-index:20; background:var(--surface); border:1px solid var(--border); border-radius:13px; box-shadow:var(--shadow-pop); overflow:hidden; min-width:150px; animation:pop .22s var(--ease-spring) both; } .cur-opt{ display:flex; align-items:center; gap:10px; width:100%; text-align:start; padding:11px 14px; border:none; background:transparent; font-family:inherit; font-size:14px; color:var(--text); cursor:pointer; min-height:46px; } .cur-opt:hover{ background:var(--primary-soft); } .cur-opt.on{ color:var(--primary); font-weight:800; } .cur-opt .sym{ width:26px; font-size:16px; font-weight:800; } /* ── DG serious panel ───────────────────────────────────────── */ .dg-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } @media (max-width:460px){ .dg-grid{ grid-template-columns:1fr } } .dg-card{ position:relative; cursor:pointer; text-align:center; border:1.5px solid var(--border-strong); border-radius:16px; padding:22px 16px; background:var(--surface); min-height:64px; transition:.2s var(--ease-spring); } .dg-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); } .dg-card .dg-ico{ width:56px; height:56px; border-radius:15px; display:grid; place-items:center; margin:0 auto 12px; background:var(--bg-sunken); color:var(--text-muted); transition:.2s; } .dg-card .dg-name{ font-weight:800; font-size:16px; } .dg-card .dg-desc{ font-size:12px; color:var(--text-muted); margin-top:5px; } .dg-card.sel.danger{ border-color:var(--danger); background:var(--danger-bg); } .dg-card.sel.danger .dg-ico{ background:var(--danger); color:#fff; animation:hazShake .5s; } .dg-card.sel.safe{ border-color:var(--success); background:var(--success-bg); } .dg-card.sel.safe .dg-ico{ background:var(--success); color:#fff; } @keyframes hazShake{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-9deg)} 75%{transform:rotate(9deg)} } .dg-panel{ margin-top:16px; border:1.5px solid color-mix(in oklab,var(--danger) 40%,var(--border)); border-radius:16px; overflow:hidden; animation:panelDrop .4s var(--ease-out) both; } @keyframes panelDrop{ from{opacity:0; transform:translateY(-10px)} to{opacity:1; transform:translateY(0)} } .dg-phd{ display:flex; align-items:center; gap:11px; padding:14px 16px; background:var(--danger-bg); color:var(--danger); border-bottom:1px solid color-mix(in oklab,var(--danger) 26%,transparent); } .dg-phd .warn-ico{ width:40px; height:40px; border-radius:11px; background:var(--danger); color:#fff; display:grid; place-items:center; flex:none; animation:pulseDanger 2s infinite; } @keyframes pulseDanger{ 0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--danger) 55%,transparent)} 70%{box-shadow:0 0 0 10px transparent} 100%{box-shadow:0 0 0 0 transparent} } .dg-phd .t{ font-weight:800; font-size:14px; } .dg-phd .s{ font-size:12px; opacity:.85; margin-top:2px; font-weight:600; } .dg-pbody{ padding:16px; display:flex; flex-direction:column; gap:14px; background:var(--surface); } .dg-upload{ border:1.5px dashed var(--border-strong); border-radius:13px; padding:18px 14px; text-align:center; color:var(--text-muted); cursor:pointer; background:var(--surface-2); transition:.16s; display:flex; align-items:center; justify-content:center; gap:10px; min-height:64px; } .dg-upload .u-ico{ width:38px; height:38px; border-radius:10px; background:var(--danger-bg); color:var(--danger); display:grid; place-items:center; flex:none; } .dg-upload:hover{ border-color:var(--danger); background:var(--danger-bg); } .dg-upload.has{ border-style:solid; border-color:var(--success); background:var(--success-bg); color:var(--success); } .dg-upload.has .u-ico{ background:var(--success); color:#fff; } .dg-upl-t{ font-weight:700; font-size:13.5px; text-align:start; } .dg-upl-s{ font-size:11.5px; opacity:.8; text-align:start; } .dg-reqmark{ color:var(--danger); font-weight:800; } /* chips (hazard class / packing group) */ .pillset{ display:flex; flex-wrap:wrap; gap:7px; } .pillset button{ min-width:44px; min-height:40px; padding:0 12px; border-radius:11px; border:1.5px solid var(--border-strong); background:var(--surface); color:var(--text); font-family:inherit; font-weight:800; font-size:14px; cursor:pointer; transition:.15s; } .pillset button:hover{ border-color:var(--danger); } .pillset button.on{ background:var(--danger); color:#fff; border-color:var(--danger); } /* switch note */ .wz-note{ display:flex; gap:10px; align-items:flex-start; margin-top:16px; padding:13px 15px; border-radius:13px; background:var(--warning-bg); border:1px solid color-mix(in oklab,var(--warning) 30%,transparent); color:var(--warning); font-size:12.5px; line-height:1.55; } /* consent */ .consent{ display:flex; gap:11px; align-items:flex-start; margin-top:16px; font-size:13px; color:var(--text-muted); line-height:1.5; cursor:pointer; padding:12px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); } .consent input{ margin-top:1px; accent-color:var(--primary); width:20px; height:20px; flex:none; } /* ── Review grouped ─────────────────────────────────────────── */ .rev-sec{ border:1px solid var(--border); border-radius:15px; overflow:hidden; margin-bottom:12px; background:var(--surface); } .rev-shd{ display:flex; align-items:center; gap:10px; padding:12px 15px; background:var(--surface-2); border-bottom:1px solid var(--border); } .rev-shd .ri{ width:30px; height:30px; border-radius:9px; background:var(--primary-soft); color:var(--primary); display:grid; place-items:center; flex:none; } .rev-shd .rt{ font-weight:800; font-size:13.5px; flex:1; } .rev-edit{ font-size:12px; font-weight:800; color:var(--primary); background:none; border:none; cursor:pointer; font-family:inherit; padding:7px 10px; border-radius:9px; display:inline-flex; align-items:center; gap:5px; min-height:36px; } .rev-edit:hover{ background:var(--primary-soft); } .rev-kv{ padding:6px 15px 12px; } .rev-line{ display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px dashed var(--border); } .rev-line:last-child{ border-bottom:none; } .rev-k{ font-size:12.5px; color:var(--text-muted); min-width:96px; } .rev-v{ font-size:14px; font-weight:700; unicode-bidi:plaintext; text-align:start; flex:1; } .rev-v .badge-mode{ vertical-align:-2px; } /* ── Success ────────────────────────────────────────────────── */ .succ{ text-align:center; padding:22px 10px; } .succ-badge{ position:relative; width:104px; height:104px; margin:0 auto 20px; } .succ-ring{ position:absolute; inset:0; border-radius:50%; border:2px solid var(--teal-500); opacity:0; animation:ringOut 2.2s var(--ease-out) infinite; } .succ-ring.d2{ animation-delay:.5s } .succ-ring.d3{ animation-delay:1s } @keyframes ringOut{ 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(1.5);opacity:0} } .succ-disc{ position:absolute; inset:16px; border-radius:50%; background:linear-gradient(135deg,var(--teal-500),var(--teal-700)); display:grid; place-items:center; box-shadow:0 14px 30px -8px color-mix(in oklab,var(--teal-600) 70%,transparent); animation:pop .6s var(--ease-spring) both; } @keyframes pop{ 0%{transform:scale(0)} 60%{transform:scale(1.12)} 100%{transform:scale(1)} } .succ-check{ stroke:#fff; stroke-width:3.4; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:draw .5s .35s var(--ease-out) forwards; } @keyframes draw{ to{ stroke-dashoffset:0 } } .succ-title{ font-size:24px; font-weight:800; margin:0 0 8px; } .succ-sub{ font-size:14px; color:var(--text-muted); line-height:1.6; margin:0 auto 20px; max-width:440px; } .succ-ref{ display:inline-flex; flex-direction:column; gap:3px; align-items:center; padding:15px 32px; border-radius:16px; margin-bottom:20px; background:var(--surface); border:1.5px dashed var(--primary); } .succ-ref .rk{ font-size:11px; font-weight:800; color:var(--text-muted); letter-spacing:.5px; text-transform:uppercase; } .succ-ref .rv{ font-size:26px; font-weight:800; color:var(--primary); font-family:var(--font-mono); letter-spacing:.5px; } .succ-meta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; } .succ-meta .m{ background:var(--surface-2); border:1px solid var(--border); border-radius:13px; padding:12px 18px; } .succ-meta .mv{ font-size:15px; font-weight:800; display:inline-flex; align-items:center; gap:7px; } .succ-meta .mk{ font-size:11.5px; color:var(--text-muted); margin-top:3px; } .succ-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:5; } .confetti i{ position:absolute; top:-12px; width:8px; height:13px; border-radius:2px; opacity:0; animation:fall 2.6s var(--ease-out) forwards; } @keyframes fall{ 0%{opacity:0;transform:translateY(-20px) rotate(0)} 12%{opacity:1} 100%{opacity:0;transform:translateY(460px) rotate(560deg)} } .mini-av{ width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,var(--teal-500),var(--teal-700)); color:#fff; font-size:9px; font-weight:800; display:grid; place-items:center; flex:none; } /* ── Intro hero ─────────────────────────────────────────────── */ .intro-card{ max-width:600px; text-align:center; padding:0; overflow:hidden; } .hero-scene{ position:relative; height:210px; background:linear-gradient(180deg,var(--sky-a),var(--sky-b)); overflow:hidden; } @media (max-width:520px){ .hero-scene{ height:180px } } .hero-sun{ position:absolute; top:22px; inset-inline-end:34px; width:46px; height:46px; border-radius:50%; background:radial-gradient(circle,#ffe9a8,#ffd166); box-shadow:0 0 40px 8px rgba(255,209,102,.5); } html[data-skin="aurora"] .hero-sun{ background:radial-gradient(circle,#cbd3ff,#8b7bf0); box-shadow:0 0 46px 10px rgba(140,120,240,.55); } .hero-arc{ position:absolute; inset:0; width:100%; height:100%; z-index:2; } .hero-pin{ position:absolute; z-index:3; width:30px; height:30px; border-radius:50%; background:var(--surface); border:2px solid var(--primary); color:var(--primary); display:grid; place-items:center; box-shadow:var(--shadow-sm); } .hero-pin.p-a{ right:34px; top:74px } .hero-pin.p-b{ left:34px; top:74px; background:var(--primary); color:var(--primary-text) } .hero-plane{ position:absolute; top:24px; left:0; z-index:4; animation:heroPlane 7s ease-in-out infinite; } @keyframes heroPlane{ 0%{left:104%; transform:scaleX(-1) translateY(16px)} 50%{transform:scaleX(-1) translateY(-8px)} 100%{left:-14%; transform:scaleX(-1) translateY(14px)} } .hero-waves{ position:absolute; left:0; right:0; bottom:0; width:100%; height:46px; z-index:3; overflow:visible; } .hero-waves .wave.w1{ fill:var(--sea); opacity:.95 } .hero-waves .wave.w2{ fill:var(--sea-2); opacity:.5 } .hero-waves .wave{ animation:waveShift 7s ease-in-out infinite alternate } .hero-ship{ position:absolute; bottom:6px; left:0; z-index:4; --vscale:.8; animation:heroShip 9s ease-in-out infinite, bob 3s ease-in-out infinite; } @keyframes heroShip{ 0%{left:108%} 100%{left:-16%} } .hero-cloud{} .hero-scene .hcl1{ width:56px;height:17px;top:30px;left:-70px; animation:cloud 17s linear infinite } .hero-scene .hcl2{ width:42px;height:14px;top:58px;left:-70px; animation:cloud 23s linear infinite 5s } .hero-scene .hcl3{ width:64px;height:19px;top:16px;left:-80px; animation:cloud 20s linear infinite 9s } .intro-body{ padding:26px 24px 30px; } .intro-kicker{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:800; color:var(--primary); background:var(--primary-soft); padding:6px 13px; border-radius:999px; margin-bottom:14px; } .intro-h1{ font-size:30px; font-weight:800; letter-spacing:-.5px; line-height:1.15; margin:0 0 6px; } .intro-h1 .grad{ background:linear-gradient(90deg,var(--teal-500),var(--teal-700)); -webkit-background-clip:text; background-clip:text; color:transparent; } @media (max-width:520px){ .intro-h1{ font-size:25px } } .intro-sub{ font-size:15px; color:var(--text-muted); margin:0 0 22px; } .intro-stats{ display:flex; justify-content:center; gap:10px; margin-bottom:24px; flex-wrap:wrap; } .intro-stat{ background:var(--surface-2); border:1px solid var(--border); border-radius:14px; padding:12px 16px; min-width:92px; } .intro-stat .sv{ font-size:20px; font-weight:800; color:var(--primary); font-variant-numeric:tabular-nums; } .intro-stat .sk{ font-size:11px; color:var(--text-muted); margin-top:2px; } .intro-cta{ width:100%; animation:ctaGlow 2.6s ease-in-out infinite; } @keyframes ctaGlow{ 0%,100%{ box-shadow:0 10px 24px -8px color-mix(in oklab,var(--primary) 65%,transparent) } 50%{ box-shadow:0 14px 38px -6px color-mix(in oklab,var(--primary) 90%,transparent) } } /* ── Admin (compact, reused) ────────────────────────────────── */ .adm{ position:relative; z-index:2; padding:16px 14px 40px; max-width:1360px; margin:0 auto; width:100%; } @media (min-width:720px){ .adm{ padding:20px 26px 48px } } .adm-hd{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; } .adm-hd h1{ font-size:21px; font-weight:800; margin:0; } .adm-hd .sub{ font-size:13px; color:var(--text-muted); margin-top:4px; } .adm-kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; } @media (min-width:900px){ .adm-kpis{ grid-template-columns:repeat(4,1fr) } } .adm-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px 16px; position:relative; overflow:hidden; } .adm-kpi .kv{ font-size:24px; font-weight:800; } .adm-kpi .kl{ font-size:12px; color:var(--text-muted); margin-top:3px; } .adm-kpi .ki{ position:absolute; top:12px; inset-inline-end:14px; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); } .adm-lanes{ display:grid; grid-template-columns:1fr; gap:12px; } @media (min-width:640px){ .adm-lanes{ grid-template-columns:repeat(2,1fr) } } @media (min-width:1100px){ .adm-lanes{ grid-template-columns:repeat(4,1fr) } } .lane{ background:var(--surface-2); border:1px solid var(--border); border-radius:14px; display:flex; flex-direction:column; min-height:180px; } .lane-hd{ padding:12px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--border); border-top:3px solid var(--lane-accent,var(--primary)); border-radius:14px 14px 0 0; } .lane-hd .lt{ font-weight:800; font-size:13px } .lane-hd .lc{ margin-inline-start:auto; font-size:11px; font-weight:800; color:var(--text-muted); background:var(--surface); border:1px solid var(--border); padding:1px 8px; border-radius:999px; } .lane-body{ padding:10px; display:flex; flex-direction:column; gap:10px; flex:1; } .lane-empty{ text-align:center; color:var(--text-faint); font-size:12px; padding:22px 10px; } .icard{ background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:13px; transition:.16s; } .icard:hover{ border-color:color-mix(in oklab,var(--primary) 40%,var(--border)); box-shadow:var(--shadow-sm); } .icard.fresh{ animation:freshIn .7s var(--ease-spring) both; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); } @keyframes freshIn{ 0%{opacity:0;transform:translateY(-14px) scale(.96)} 100%{opacity:1;transform:translateY(0) scale(1)} } .icard-top{ display:flex; align-items:center; gap:8px; margin-bottom:8px; } .icard-ref{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); } .icard-name{ font-weight:800; font-size:13.5px; } .icard-route{ font-size:11.5px; color:var(--text-muted); margin-top:3px; display:flex; align-items:center; gap:5px; } .icard-meta{ display:flex; align-items:center; gap:8px; margin-top:10px; } .icard-foot{ margin-top:11px; padding-top:11px; border-top:1px dashed var(--border); display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .icard-assignee{ display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--text-muted); } .btn-mini{ margin-inline-start:auto; display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:12px; font-weight:800; padding:8px 12px; border-radius:10px; border:1px solid var(--primary); background:var(--primary); color:var(--primary-text); cursor:pointer; min-height:38px; transition:.15s; } .btn-mini:hover{ background:var(--primary-hover) } .btn-mini.ghost{ background:transparent; color:var(--primary) } .btn-mini.ghost:hover{ background:var(--primary-soft) } .icard-detail{ margin-top:8px; width:100%; background:transparent; border:none; color:var(--text-faint); font-size:11px; font-family:inherit; cursor:pointer; padding:4px; min-height:32px; } .icard-detail:hover{ color:var(--primary) } .assign-back,.drawer-back{ position:fixed; inset:0; z-index:800; background:rgba(13,24,32,.45); backdrop-filter:blur(3px); animation:fadeIn .2s; } .assign-back{ display:flex; align-items:flex-end; justify-content:center; padding:0; } @media (min-width:640px){ .assign-back{ align-items:center; padding:20px } } .assign-modal{ width:100%; max-width:440px; background:var(--surface); border:1px solid var(--border); border-radius:18px 18px 0 0; box-shadow:var(--shadow-pop); overflow:hidden; animation:sheetUp .3s var(--ease-out) both; } @media (min-width:640px){ .assign-modal{ border-radius:18px; animation:pop .32s var(--ease-spring) both } } .assign-hd{ padding:16px 20px; border-bottom:1px solid var(--border) } .assign-hd .t{ font-weight:800; font-size:15px } .assign-hd .s{ font-size:12px; color:var(--text-muted); margin-top:3px } .assign-body{ padding:12px; display:flex; flex-direction:column; gap:8px; max-height:62vh; overflow-y:auto; overflow-x:hidden; } .spec{ display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface); cursor:pointer; text-align:start; font-family:inherit; color:var(--text); min-height:60px; transition:.15s var(--ease-spring); } .spec:hover{ border-color:var(--primary); background:var(--primary-soft); } .spec .av{ width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:800 } .spec .nm{ font-weight:800; font-size:14px } .spec .rl{ font-size:11.5px; color:var(--text-muted); margin-top:1px } .spec .match{ margin-inline-start:auto; font-size:10px; font-weight:800; color:var(--success); background:var(--success-bg); padding:4px 9px; border-radius:999px } .assign-foot{ padding:12px 20px; border-top:1px solid var(--border); display:flex; justify-content:flex-end } .drawer{ position:fixed; top:0; inset-inline-end:0; height:100%; width:440px; max-width:94vw; background:var(--surface); border-inline-start:1px solid var(--border); box-shadow:var(--shadow-pop); z-index:801; display:flex; flex-direction:column; animation:slideIn .34s var(--ease-out) both; } @keyframes slideIn{ from{transform:translateX(100%)} to{transform:translateX(0)} } html[dir="rtl"] .drawer{ animation-name:slideInR } @keyframes slideInR{ from{transform:translateX(-100%)} to{transform:translateX(0)} } .drawer-hd{ padding:18px 20px; border-bottom:1px solid var(--border); display:flex; align-items:flex-start; gap:10px } .drawer-body{ padding:20px; overflow-y:auto; overflow-x:hidden; flex:1 } .drawer-kv{ display:grid; grid-template-columns:120px 1fr; gap:11px 14px; font-size:13.5px } .drawer-kv dt{ color:var(--text-muted) } .drawer-kv dd{ margin:0; font-weight:700; unicode-bidi:plaintext; overflow-wrap:anywhere } .icon-btn{ width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid transparent; background:transparent; color:var(--text-muted); cursor:pointer } .icon-btn:hover{ background:var(--surface-hover); color:var(--text) } .badge-mode{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:6px; font-size:10.5px; font-weight:800; border:1px solid var(--border-strong); color:var(--text-muted) } /* toast */ .inq-toast{ position:fixed; bottom:calc(20px + env(safe-area-inset-bottom)); inset-inline-start:50%; transform:translateX(-50%) translateY(20px); z-index:950; background:var(--gray-900); color:#fff; padding:12px 20px; border-radius:12px; font-size:13.5px; font-weight:700; box-shadow:var(--shadow-pop); display:flex; align-items:center; gap:9px; opacity:0; transition:.35s var(--ease-spring); max-width:90vw } html[data-theme="dark"] .inq-toast{ background:var(--surface); border:1px solid var(--border-strong) } .inq-toast.show{ opacity:1; transform:translateX(-50%) translateY(0) } .inq-toast .ti{ color:var(--teal-400) } @media (prefers-reduced-motion: reduce){ .inq-orb,.wz-bar-fill::after,.succ-ring,.confetti i,.cloud,.wave,.veh,.road-dash,.hero-plane,.hero-ship,.dg-phd .warn-ico,.wheel,.op-ring,.op-sat,.op-dots i,.intro-cta{ animation:none !important } .stp-enter-fwd,.stp-enter-back,.rise,.icard.fresh,.succ-disc,.assign-modal,.drawer,.pick,.dg-panel{ animation-duration:.01ms !important } }