/* TickiTon Traffic Dashboard — PRO Skin
   Dark, premium look inspired by modern analytics suites.
   Safe to drop-in: only augments classes prefixed with .ttd-
*/
:root{
  --ttd-bg:#0b0f14;
  --ttd-surface:#111826;
  --ttd-card:#0f172a;
  --ttd-card-2:#111827;
  --ttd-border:#1f2937;
  --ttd-muted:#6b7280;
  --ttd-text:#e5e7eb;
  --ttd-title:#f8fafc;
  --ttd-accent:#22c55e; /* green accent default */
  --ttd-accent-2:#a3e635;
  --ttd-warning:#f59e0b;
  --ttd-danger:#ef4444;
  --ttd-ok:#10b981;
  --ttd-shadow: 0 10px 30px rgba(0,0,0,.35);
  --ttd-radius: 16px;
}

body .ttd-root.ttd-full{
  background: radial-gradient(1200px 600px at 10% -10%, rgba(34,197,94,.15), transparent 60%),
              radial-gradient(1200px 600px at 110% 110%, rgba(253,186,116,.10), transparent 60%),
              var(--ttd-bg);
  color:var(--ttd-text);
  min-height:70vh;
  padding:24px;
}

.ttd-theme, .ttd-wrap{
  max-width:1200px;
  margin-inline:auto;
}

.ttd-card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)) , var(--ttd-card);
  border:1px solid var(--ttd-border);
  border-radius:var(--ttd-radius);
  box-shadow:var(--ttd-shadow);
  padding:20px;
}

.ttd-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:16px;
}
.ttd-col-12{grid-column: span 12;}
.ttd-col-8{grid-column: span 8;}
.ttd-col-6{grid-column: span 6;}
.ttd-col-4{grid-column: span 4;}
.ttd-col-3{grid-column: span 3;}
@media (max-width: 1024px){
  .ttd-col-8{grid-column: span 12;}
  .ttd-col-6{grid-column: span 12;}
  .ttd-col-4{grid-column: span 6;}
  .ttd-col-3{grid-column: span 6;}
}
@media (max-width: 640px){
  .ttd-col-4, .ttd-col-3{grid-column: span 12;}
}

.ttd-kpi{
  display:flex; align-items:center; gap:16px;
}
.ttd-kpi__ring{
  width:56px; height:56px; border-radius:999px;
  background:conic-gradient(var(--ttd-accent) var(--ttd-kpi,60%), #1f2937 0);
  position:relative;
  box-shadow: inset 0 0 0 8px #0b1220, 0 4px 20px rgba(34,197,94,.25);
}
.ttd-kpi__ring::after{
  content:''; position:absolute; inset:8px; border-radius:999px; background:var(--ttd-card);
}
.ttd-kpi__meta b{color:var(--ttd-title); font-size:1.1rem}
.ttd-kpi__delta{font-size:.85rem; color:var(--ttd-muted)}
.ttd-kpi__delta.up{color:var(--ttd-ok)}
.ttd-kpi__delta.down{color:var(--ttd-danger)}

.ttd-table{
  width:100%; border-collapse:collapse; font-size:.93rem;
}
.ttd-table th, .ttd-table td{
  padding:12px 10px; border-bottom:1px solid var(--ttd-border);
}
.ttd-table thead th{
  color:var(--ttd-muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em;
}
.ttd-table tbody tr:hover{background:#0f1b2c}

.ttd-badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  border-radius:999px; background:rgba(34,197,94,.12); color:var(--ttd-accent);
  border:1px solid rgba(34,197,94,.25);
}
.ttd-badge.warn{background:rgba(245,158,11,.12); color:var(--ttd-warning); border-color:rgba(245,158,11,.25)}

.ttd-legend{
  display:flex; gap:12px; flex-wrap:wrap;
}
.ttd-dot{width:10px; height:10px; border-radius:10px; display:inline-block;}

.ttd-toolbar{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;
}
.ttd-toolbar .ttd-actions{display:flex; gap:8px}
.ttd-btn{
  appearance:none; border:1px solid var(--ttd-border);
  background:linear-gradient(180deg, rgba(34,197,94,.1), rgba(34,197,94,.05));
  color:var(--ttd-title); padding:10px 14px; border-radius:12px; cursor:pointer;
}
.ttd-btn--accent{
  background:linear-gradient(180deg, var(--ttd-accent), var(--ttd-accent-2));
  color:#0a0f16; border:none; box-shadow:0 6px 20px rgba(34,197,94,.45);
}
.ttd-btn:disabled{opacity:.6; cursor:not-allowed}

/* Animated atom logo */
.ttd-logo--atom{
  width:40px;height:40px;border-radius:999px;
  position:relative; display:grid; place-items:center;
  background: radial-gradient(12px 12px at 50% 50%, #c7f9cc 0, transparent 65%);
  box-shadow: 0 0 0 1px rgba(34,197,94,.3), inset 0 0 24px rgba(163,230,53,.45);
  animation: ttdPulse 2.7s ease-in-out infinite;
}
.ttd-logo--atom::before, .ttd-logo--atom::after{
  content:''; position:absolute; inset:-6px; border-radius:999px; 
  border:1px dashed rgba(163,230,53,.3);
  animation: ttdOrbit 4.4s linear infinite;
}
.ttd-logo--atom::after{ animation-duration: 6.2s; transform: rotate(60deg); }

@keyframes ttdPulse{ 0%,100%{ transform:scale(1)} 50%{ transform:scale(1.08)} }
@keyframes ttdOrbit{ to{ transform: rotate(360deg);} }

/* Auth portal */
.ttd-auth{
  max-width:920px; margin:0 auto; display:grid; gap:16px; grid-template-columns:1.1fr .9fr;
}
.ttd-auth .ttd-pane{ padding:22px }
@media (max-width:900px){ .ttd-auth{ grid-template-columns:1fr } }

/* Accents via data attribute */
[data-ttd-accent="amber"]{ --ttd-accent:#f59e0b; --ttd-accent-2:#fbbf24 }
[data-ttd-accent="emerald"]{ --ttd-accent:#10b981; --ttd-accent-2:#34d399 }
[data-ttd-accent="sky"]{ --ttd-accent:#06b6d4; --ttd-accent-2:#22d3ee }
[data-ttd-accent="violet"]{ --ttd-accent:#8b5cf6; --ttd-accent-2:#a78bfa }