[x-cloak] { display: none !important; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
    50%      { opacity: 0.65; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

@keyframes pulse-amber {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.55); }
    50%      { opacity: 0.65; box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

@keyframes pulse-orange {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(244, 121, 32, 0.55); }
    50%      { opacity: 0.65; box-shadow: 0 0 0 6px rgba(244, 121, 32, 0); }
}

.led-dot {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    display: inline-block;
}

.led-running  { background: #F47920; animation: pulse-orange 1.6s ease-in-out infinite; }
.led-await    { background: #F59E0B; animation: pulse-amber  2.0s ease-in-out infinite; }
.led-complete { background: #1D6B3A; }
.led-error    { background: #8B1A1A; }
.led-pending  { background: #D1D5DB; }
.led-system   { background: #22C55E; animation: pulse-dot 2.2s ease-in-out infinite; }

.bg-grid {
    background-image: radial-gradient(circle, rgba(85, 85, 85, 0.07) 1px, transparent 1px);
    background-size: 14px 14px;
    background-position: 0 0;
}

.hero-gradient {
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(244, 121, 32, 0.28) 0%, rgba(244, 121, 32, 0) 58%),
        radial-gradient(120% 140% at 100% 100%, rgba(253, 186, 116, 0.34) 0%, rgba(253, 186, 116, 0) 62%),
        radial-gradient(80% 90% at 50% 0%, rgba(255, 227, 204, 0.45) 0%, rgba(255, 227, 204, 0) 65%),
        #FFFDF9;
}

.glass-nav {
    background-color: rgba(255, 253, 249, 0.75);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.font-mono-ui {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-feature-settings: "ss01", "cv01";
}

.nav-link {
    position: relative;
    padding-bottom: 2px;
}

.nav-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: #F47920;
    border-radius: 2px;
}

/* Pill-style nav links — active = ink bg + white text, hover = orange-soft bg. */
.nav-pill {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    color: #4A3F36;
    transition: background-color 0.18s ease, color 0.18s ease;
    line-height: 1;
    text-decoration: none;
}

.nav-pill:hover {
    background: #FFE3CC;
    color: #D4621A;
}

.nav-pill[aria-current="page"] {
    background: #1B140F;
    color: #FFFFFF;
}

.accent-bar {
    width: 3px;
    border-radius: 9999px;
    align-self: stretch;
}

.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.accent-orange { background: #F47920; }
.accent-amber  { background: #F59E0B; }
.accent-sky    { background: #0EA5E9; }

/* ─────────────────────────────────────────────────────────────────────
   Sweet Studio design tokens (additive — used opt-in via .sw-* classes)
   ───────────────────────────────────────────────────────────────────── */

.sw-card {
    background: #FFFFFF;
    border: 1px solid #EFE3D2;
    border-radius: 28px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 12px 28px -16px rgba(244, 121, 32, 0.18),
        0 4px 12px -8px rgba(27, 20, 15, 0.06);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sw-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 18px 38px -18px rgba(244, 121, 32, 0.25),
        0 6px 16px -10px rgba(27, 20, 15, 0.08);
}

.sw-card-pad { padding: 24px 28px; }

/* Static surface — same shape as .sw-card, no hover lift (for table cards). */
.sw-card-flat:hover { transform: none; box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 12px 28px -16px rgba(244, 121, 32, 0.18),
        0 4px 12px -8px rgba(27, 20, 15, 0.06); }

.sw-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 11px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}

.sw-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

.sw-btn-primary       { background: #1B140F; color: #FFFFFF; }
.sw-btn-primary:hover { background: #F47920; transform: translateY(-1px); }

.sw-btn-orange        { background: #F47920; color: #FFFFFF; box-shadow: 0 8px 18px -10px rgba(244, 121, 32, 0.55); }
.sw-btn-orange:hover  { background: #D4621A; transform: translateY(-1px); }

.sw-btn-ghost         { background: transparent; color: #4A3F36; border-color: #EFE3D2; }
.sw-btn-ghost:hover   { background: #FFFFFF; border-color: #1B140F; color: #1B140F; }

.sw-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.sw-mono {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
    font-feature-settings: "ss01", "cv01";
}

.sw-bar {
    height: 6px;
    background: #FBEEDB;
    border-radius: 6px;
    overflow: hidden;
}

.sw-bar > span {
    display: block;
    height: 100%;
    background: #F47920;
    border-radius: 6px;
}

.sw-progress {
    height: 4px;
    border-radius: 999px;
    background: #FBEEDB;
    position: relative;
    overflow: hidden;
}

.sw-progress::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(244, 121, 32, 0.65) 50%, transparent 100%);
    animation: sw-scan 1.6s ease-in-out infinite;
}

/* Sweet status dots — namespaced keyframes (sw-pulse) so they don't
   collide with the existing .led-* system used by dashboard.js. */
.dot { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }
.dot-running  { background: #F47920; box-shadow: 0 0 0 4px rgba(244, 121, 32, 0.18); animation: sw-pulse 1.4s ease-in-out infinite; }
.dot-system   { background: #3F8C5F; animation: sw-pulse-system 2.2s ease-in-out infinite; }
.dot-done     { background: #3F8C5F; }
.dot-pending  { background: #D8C9B6; }
.dot-error    { background: #B5453F; }

@keyframes sw-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(0.92); opacity: 0.55; }
}

@keyframes sw-pulse-system {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(63, 140, 95, 0.55); }
    50%      { opacity: 0.7; box-shadow: 0 0 0 5px rgba(63, 140, 95, 0); }
}

@keyframes sw-scan {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}