/* HALONG INTEL UI System · V1.6.7
   Internal design tokens and reusable primitives.
   No third-party runtime dependency; rules are implemented locally. */
:root{
 --ui-bg:var(--canvas,#f3f5f8);
 --ui-surface:#fff;
 --ui-surface-subtle:#f8f9fb;
 --ui-surface-accent:#f0f3f8;
 --ui-text:var(--ink,#182b45);
 --ui-text-muted:var(--muted,#637389);
 --ui-border:var(--line,#e0e5ed);
 --ui-border-strong:#c9d2df;
 --ui-primary:var(--accent,#193a6a);
 --ui-primary-soft:#e7ecf4;
 --ui-success:#257951;
 --ui-success-soft:#e4f4ed;
 --ui-warning:#966c21;
 --ui-warning-soft:#fff3de;
 --ui-danger:#a74747;
 --ui-danger-soft:#fbe9e9;
 --ui-info:#385b8c;
 --ui-info-soft:#e8f1fb;
 --ui-radius-xs:6px;
 --ui-radius-sm:9px;
 --ui-radius-md:12px;
 --ui-radius-lg:16px;
 --ui-radius-xl:20px;
 --ui-shadow-sm:0 2px 8px rgba(16,45,60,.06);
 --ui-shadow-md:0 12px 34px rgba(16,45,60,.11);
 --ui-shadow-lg:0 28px 80px rgba(10,38,57,.22);
 --ui-space-1:4px;
 --ui-space-2:8px;
 --ui-space-3:12px;
 --ui-space-4:16px;
 --ui-space-5:20px;
 --ui-space-6:24px;
 --ui-space-8:32px;
 --ui-control-h:42px;
 --ui-control-h-sm:34px;
 --ui-content-max:1600px;
}

/* Reusable primitives for new/refactored screens. */
.ui-surface{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-sm)}
.ui-section{display:grid;gap:var(--ui-space-4)}
.ui-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ui-space-4)}
.ui-section-head h2,.ui-section-head h3{margin:0}.ui-section-head p{margin:5px 0 0;color:var(--ui-text-muted);font-size:.8125rem}
.ui-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-3);flex-wrap:wrap}
.ui-actions{display:flex;align-items:center;gap:var(--ui-space-2);flex-wrap:wrap}
.ui-divider{height:1px;background:var(--ui-border);border:0;margin:0}
.ui-muted{color:var(--ui-text-muted)}

.ui-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:5px 9px;border-radius:999px;border:1px solid var(--ui-border);background:var(--ui-surface-subtle);font-size:.72rem;font-weight:600;color:var(--ui-text-muted)}
.ui-chip.good{background:var(--ui-success-soft);border-color:#cee9dc;color:var(--ui-success)}
.ui-chip.warn{background:var(--ui-warning-soft);border-color:#f1dfbf;color:var(--ui-warning)}
.ui-chip.bad{background:var(--ui-danger-soft);border-color:#efd4d4;color:var(--ui-danger)}
.ui-chip.info{background:var(--ui-info-soft);border-color:#d8e6f3;color:var(--ui-info)}

.ui-field{display:grid;gap:7px}.ui-field>span{font-size:.8125rem;font-weight:600;color:var(--ui-text)}.ui-field>small{font-size:.72rem;line-height:1.55;color:var(--ui-text-muted)}
.ui-control{width:100%;min-height:var(--ui-control-h);border:1px solid var(--ui-border-strong);border-radius:var(--ui-radius-sm);background:#fff;color:var(--ui-text);padding:10px 12px;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.ui-control:hover{border-color:#abbace}.ui-control:focus{border-color:#7e9ac2;box-shadow:0 0 0 3px rgba(25,58,106,.11)}.ui-control[aria-invalid="true"]{border-color:#d68787;background:#fffafa}.ui-control:disabled{background:#f2f4f6;color:#8fa0a9;cursor:not-allowed}

.ui-state{display:grid;place-items:center;text-align:center;gap:var(--ui-space-3);min-height:220px;padding:var(--ui-space-8);border:1px dashed var(--ui-border-strong);border-radius:var(--ui-radius-lg);background:var(--ui-surface-subtle)}
.ui-state-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--ui-primary-soft);color:var(--ui-primary)}
.ui-state h3{margin:0;font-size:.95rem}.ui-state p{margin:0;max-width:480px;color:var(--ui-text-muted);font-size:.8125rem}

.ui-skeleton{position:relative;overflow:hidden;background:#edf0f4;border-radius:var(--ui-radius-xs);min-height:12px}.ui-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:uiShimmer 1.25s infinite}@keyframes uiShimmer{100%{transform:translateX(100%)}}

.ui-scroll{scrollbar-width:thin;scrollbar-color:#b4becc transparent}.ui-scroll::-webkit-scrollbar{width:8px;height:8px}.ui-scroll::-webkit-scrollbar-thumb{background:#b4becc;border-radius:20px}.ui-scroll::-webkit-scrollbar-track{background:transparent}

/* Keep existing controls visually consistent without changing their behavior. */
.btn,.search,input,select,textarea,.combo-input{transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,transform .15s ease}
.panel,.metric,.competitor-card,.task-card{box-shadow:var(--ui-shadow-sm)}
.table-wrap{box-shadow:0 1px 4px rgba(16,45,60,.03)}
dialog{box-shadow:var(--ui-shadow-lg)}

@media(max-width:700px){.ui-section-head{align-items:stretch;flex-direction:column}.ui-toolbar{align-items:stretch}.ui-toolbar>.ui-actions{width:100%}.ui-toolbar>.ui-actions .btn{flex:1}.ui-state{min-height:180px;padding:var(--ui-space-6)}}
@media(prefers-reduced-motion:reduce){.ui-skeleton:after{animation:none}.btn,.search,input,select,textarea,.combo-input{transition:none}}