
.apx-preview{min-height:260px;position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--border);background:var(--card);padding:18px}
.apx-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.apx-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.apx-muted{color:var(--muted)}.apx-title{font-weight:800;font-size:16px}.apx-value{font-size:32px;font-weight:800;letter-spacing:-.04em}
.apx-chip{padding:5px 9px;border:1px solid var(--border);border-radius:999px;font-size:11px;background:var(--bg)}
.apx-grid{display:grid;gap:10px}.apx-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.apx-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.apx-card{border:1px solid var(--border);border-radius:16px;padding:14px;background:var(--bg);box-shadow:0 10px 30px rgba(0,0,0,.04)}
.apx-spark{height:52px;border-radius:10px;background:linear-gradient(180deg,rgba(96,120,255,.14),transparent);position:relative;overflow:hidden}
.apx-spark:after{content:"";position:absolute;inset:8px 4px 10px;background:linear-gradient(135deg,transparent 0 20%,currentColor 20% 22%,transparent 22% 39%,currentColor 39% 41%,transparent 41% 58%,currentColor 58% 60%,transparent 60%);opacity:.45}
.apx-table{width:100%;border-collapse:collapse;font-size:12px}.apx-table th,.apx-table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}.apx-table th{color:var(--muted);font-weight:600}
.apx-toolbar{display:flex;gap:8px;flex-wrap:wrap}.apx-input{height:38px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:var(--bg);min-width:130px}
.apx-btn{height:38px;border:1px solid var(--border);border-radius:10px;padding:0 12px;background:var(--card);font-weight:700;cursor:pointer}
.apx-kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.apx-col{padding:10px;border:1px solid var(--border);border-radius:14px;background:var(--bg);min-height:170px}
.apx-ticket{padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--card);margin-top:8px}.apx-room{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.apx-room div{padding:12px;border-radius:12px;border:1px solid var(--border);background:var(--bg);text-align:center;font-weight:800}
.apx-dots{display:inline-flex;gap:4px}.apx-dots i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:apxDot 1.1s infinite ease-in-out}.apx-dots i:nth-child(2){animation-delay:.12s}.apx-dots i:nth-child(3){animation-delay:.24s}
@keyframes apxDot{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.apx-fade{animation:apxFade .55s cubic-bezier(.2,.8,.2,1) both}@keyframes apxFade{from{opacity:0;filter:blur(8px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:none}}
.apx-spot{position:absolute;inset:-20%;background:radial-gradient(circle at 60% 25%,rgba(111,122,255,.18),transparent 35%);pointer-events:none}
.apx-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--border);border-radius:20px 20px 0 0;padding:16px;box-shadow:0 -14px 40px rgba(0,0,0,.08)}
.apx-nav{display:flex;justify-content:space-around;align-items:center;border:1px solid var(--border);border-radius:16px;padding:8px;background:var(--bg)}.apx-nav span{padding:8px 10px;border-radius:10px}.apx-nav .active{background:var(--card);font-weight:800}
.apx-skeleton{height:12px;border-radius:999px;background:linear-gradient(90deg,var(--border),var(--card),var(--border));background-size:200% 100%;animation:apxSk 1.3s linear infinite}@keyframes apxSk{to{background-position:-200% 0}}
.apx-toast{position:absolute;right:14px;bottom:14px;min-width:220px;border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--card);box-shadow:0 18px 50px rgba(0,0,0,.14)}
.apx-progress{height:4px;background:var(--border);border-radius:99px;overflow:hidden}.apx-progress i{display:block;height:100%;width:72%;background:currentColor;animation:apxProg 2.2s infinite alternate ease-in-out}@keyframes apxProg{from{width:18%}to{width:88%}}
@media(max-width:700px){.apx-grid-3,.apx-kanban{grid-template-columns:1fr}.apx-grid-2{grid-template-columns:1fr}.apx-room{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){.apx-dots i,.apx-fade,.apx-skeleton,.apx-progress i{animation:none!important}}
