:root {
    --dto-primary:#21b7aa;
    --dto-primary-dark:#168f86;
    --dto-primary-soft:#e9f9f7;
    --dto-ink:#111827;
    --dto-text:#334155;
    --dto-muted:#64748b;
    --dto-line:#e2e8f0;
    --dto-surface:#ffffff;
    --dto-bg:#f5f7fa;
    --dto-sidebar:#111827;
    --dto-sidebar-soft:#1f2937;
    --dto-success:#16a34a;
    --dto-success-soft:#ecfdf3;
    --dto-warning:#d97706;
    --dto-warning-soft:#fff7ed;
    --dto-danger:#dc2626;
    --dto-danger-soft:#fff1f2;
    --dto-info:#2563eb;
    --dto-info-soft:#eff6ff;
    --dto-shadow-sm:0 1px 2px rgba(15,23,42,.04);
    --dto-shadow:0 10px 30px rgba(15,23,42,.07);
    --dto-shadow-lg:0 24px 60px rgba(15,23,42,.16);
    --dto-radius-sm:10px;
    --dto-radius:16px;
    --dto-radius-lg:22px;
    --dto-sidebar-width:250px;
    --dto-topbar-height:76px;
    --dto-bottom-nav-height:72px;
}

html { scroll-behavior:smooth; }

body.dto-v2-app {
    margin:0;
    background:var(--dto-bg);
    color:var(--dto-text);
    font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

body.dto-v2-app *,
body.dto-v2-app *::before,
body.dto-v2-app *::after { box-sizing:border-box; }

body.dto-v2-app a { color:inherit; }

.dto-app-shell {
    min-height:100vh;
    background:var(--dto-bg);
}

.dto-app-sidebar {
    position:fixed;
    inset:0 auto 0 0;
    width:var(--dto-sidebar-width);
    padding:22px 16px 18px;
    background:linear-gradient(180deg,#111827 0%,#0f172a 100%);
    color:#fff;
    display:flex;
    flex-direction:column;
    z-index:1200;
    box-shadow:8px 0 28px rgba(15,23,42,.08);
}

.dto-app-brand {
    display:flex;
    align-items:center;
    gap:12px;
    padding:0 10px 24px;
    text-decoration:none;
}

.dto-app-brand img {
    width:82px;
    max-height:42px;
    filter:brightness(0) invert(1);
    object-fit:contain;
}

.dto-app-brand-copy { min-width:0; }
.dto-app-brand-copy strong { display:block; font-size:14px; line-height:1.2; letter-spacing:.01em; }
.dto-app-brand-copy span { display:block; margin-top:3px; font-size:11px; color:#94a3b8; }

.dto-app-nav { display:flex; flex-direction:column; gap:5px; }
.dto-app-nav-title { padding:13px 12px 7px; color:#64748b; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; }

.dto-app-nav-link {
    display:flex;
    align-items:center;
    gap:12px;
    min-height:44px;
    padding:0 13px;
    border-radius:12px;
    text-decoration:none;
    color:#cbd5e1;
    font-size:14px;
    font-weight:650;
    transition:.18s ease;
}
.dto-app-nav-link i { width:19px; text-align:center; font-size:15px; }
.dto-app-nav-link:hover { background:rgba(255,255,255,.07); color:#fff; }
.dto-app-nav-link.is-active { background:linear-gradient(135deg,var(--dto-primary) 0%,#47c7bd 100%); color:#fff; box-shadow:0 10px 24px rgba(33,183,170,.25); }

.dto-app-sidebar-bottom { margin-top:auto; padding-top:18px; }
.dto-app-user-mini {
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    background:rgba(255,255,255,.035);
}
.dto-app-avatar {
    width:38px;
    height:38px;
    border-radius:50%;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    background:linear-gradient(135deg,var(--dto-primary),#82ded7);
    color:#fff;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
}
.dto-app-user-mini strong { display:block; max-width:142px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
.dto-app-user-mini span { display:block; margin-top:2px; color:#94a3b8; font-size:10px; text-transform:capitalize; }

.dto-app-stage { min-height:100vh; margin-left:var(--dto-sidebar-width); }

.dto-app-topbar {
    height:var(--dto-topbar-height);
    position:sticky;
    top:0;
    z-index:900;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 32px;
    background:rgba(245,247,250,.88);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(226,232,240,.85);
}
.dto-app-topbar-left { min-width:0; display:flex; align-items:center; gap:14px; }
.dto-app-topbar-title { margin:0; color:var(--dto-ink); font-size:20px; font-weight:800; line-height:1.1; }
.dto-app-topbar-subtitle { margin-top:3px; color:var(--dto-muted); font-size:12px; }

.dto-app-topbar-actions { display:flex; align-items:center; gap:9px; }
.dto-icon-button {
    width:42px;
    height:42px;
    border:1px solid var(--dto-line);
    border-radius:12px;
    background:#fff;
    color:var(--dto-text);
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:var(--dto-shadow-sm);
    transition:.18s ease;
}
.dto-icon-button:hover { transform:translateY(-1px); border-color:#cbd5e1; box-shadow:0 8px 20px rgba(15,23,42,.08); }

.dto-topbar-profile { position:relative; }
.dto-profile-trigger {
    min-height:44px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:4px 8px 4px 5px;
    border:1px solid var(--dto-line);
    border-radius:13px;
    background:#fff;
    cursor:pointer;
}
.dto-profile-trigger .dto-app-avatar { width:34px; height:34px; font-size:11px; }
.dto-profile-trigger-copy { text-align:left; min-width:0; }
.dto-profile-trigger-copy strong { display:block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dto-ink); font-size:12px; }
.dto-profile-trigger-copy span { display:block; margin-top:1px; color:var(--dto-muted); font-size:10px; text-transform:capitalize; }
.dto-profile-menu {
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    width:250px;
    padding:8px;
    border:1px solid var(--dto-line);
    border-radius:15px;
    background:#fff;
    box-shadow:var(--dto-shadow-lg);
    opacity:0;
    visibility:hidden;
    transform:translateY(-5px);
    transition:.18s ease;
}
.dto-profile-menu.is-open { opacity:1; visibility:visible; transform:translateY(0); }
.dto-profile-menu-meta { padding:10px 11px 12px; border-bottom:1px solid var(--dto-line); margin-bottom:6px; }
.dto-profile-menu-meta strong { display:block; color:var(--dto-ink); font-size:13px; }
.dto-profile-menu-meta span { display:block; margin-top:4px; color:var(--dto-muted); font-size:11px; }
.dto-profile-menu a { display:flex; align-items:center; gap:9px; padding:10px 11px; border-radius:9px; text-decoration:none; font-size:12px; font-weight:650; }
.dto-profile-menu a:hover { background:#f8fafc; }
.dto-profile-menu a.dto-logout { color:var(--dto-danger); }

.dto-app-main { padding:28px 32px 52px; }
.dto-app-content { width:100%; max-width:1440px; margin:0 auto; }

/* Generic UI */
.dto-page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.dto-page-heading h1 { margin:0; color:var(--dto-ink); font-size:28px; line-height:1.15; font-weight:850; letter-spacing:-.025em; }
.dto-page-heading p { margin:7px 0 0; color:var(--dto-muted); font-size:14px; line-height:1.5; }
.dto-page-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }

.dto-card { background:var(--dto-surface); border:1px solid rgba(226,232,240,.85); border-radius:var(--dto-radius); box-shadow:var(--dto-shadow-sm); }
.dto-card-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px; border-bottom:1px solid var(--dto-line); }
.dto-card-header h2,.dto-card-header h3 { margin:0; color:var(--dto-ink); font-size:16px; font-weight:800; }
.dto-card-body { padding:22px; }

.dto-btn {
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 16px;
    border:1px solid transparent;
    border-radius:11px;
    text-decoration:none;
    font-size:13px;
    font-weight:750;
    cursor:pointer;
    transition:.18s ease;
}
.dto-btn:hover { transform:translateY(-1px); }
.dto-btn:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.dto-btn-primary { background:var(--dto-primary); color:#fff!important; box-shadow:0 8px 20px rgba(33,183,170,.2); }
.dto-btn-primary:hover { background:var(--dto-primary-dark); }
.dto-btn-secondary { background:#fff; border-color:var(--dto-line); color:var(--dto-text)!important; }
.dto-btn-danger { background:var(--dto-danger-soft); color:var(--dto-danger)!important; border-color:#fecdd3; }
.dto-btn-ghost { background:transparent; color:var(--dto-text)!important; }
.dto-btn-sm { min-height:35px; padding:0 12px; border-radius:9px; font-size:12px; }

.dto-input,.dto-select,.dto-textarea {
    width:100%;
    min-height:44px;
    padding:0 13px;
    border:1px solid #d8e0e8;
    border-radius:11px;
    outline:none;
    background:#fff;
    color:var(--dto-ink);
    font:inherit;
    font-size:13px;
    transition:.18s ease;
}
.dto-textarea { min-height:110px; padding-top:12px; resize:vertical; }
.dto-input:focus,.dto-select:focus,.dto-textarea:focus { border-color:var(--dto-primary); box-shadow:0 0 0 3px rgba(33,183,170,.12); }
.dto-label { display:block; margin-bottom:7px; color:var(--dto-text); font-size:12px; font-weight:750; }
.dto-help { margin:6px 0 0; color:var(--dto-muted); font-size:11px; line-height:1.45; }

.dto-badge { display:inline-flex; align-items:center; gap:5px; min-height:25px; padding:0 9px; border-radius:999px; font-size:10px; font-weight:800; white-space:nowrap; }
.dto-badge-success { background:var(--dto-success-soft); color:var(--dto-success); }
.dto-badge-warning { background:var(--dto-warning-soft); color:var(--dto-warning); }
.dto-badge-danger { background:var(--dto-danger-soft); color:var(--dto-danger); }
.dto-badge-info { background:var(--dto-info-soft); color:var(--dto-info); }
.dto-badge-neutral { background:#f1f5f9; color:#475569; }

.dto-empty { min-height:260px; padding:36px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.dto-empty-icon { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin-bottom:14px; background:var(--dto-primary-soft); color:var(--dto-primary-dark); font-size:22px; }
.dto-empty h3 { margin:0; color:var(--dto-ink); font-size:16px; }
.dto-empty p { max-width:420px; margin:7px 0 0; color:var(--dto-muted); font-size:12px; line-height:1.5; }

.dto-mobile-topbar-button { display:none; }
.dto-app-bottom-nav { display:none; }
.dto-mobile-drawer-overlay { display:none; }

/* Public shell / login */
body:not(.dto-v2-app) .dto-public-shell { min-height:100vh; background:#f7f9fb; }
.dto-public-header { height:100px; display:flex; align-items:center; justify-content:center; }
.dto-public-header img { width:105px; max-height:56px; object-fit:contain; }
.dto-public-main { max-width:1100px; margin:0 auto; padding:0 20px 60px; }

@media (max-width: 980px) {
    body.dto-v2-app { padding-bottom:var(--dto-bottom-nav-height); }
    .dto-app-sidebar { display:none; }
    .dto-app-stage { margin-left:0; }
    .dto-app-topbar { height:66px; padding:0 18px; }
    .dto-app-topbar-title { font-size:17px; }
    .dto-app-topbar-subtitle { display:none; }
    .dto-app-main { padding:20px 18px 34px; }
    .dto-profile-trigger-copy { display:none; }
    .dto-profile-trigger { padding-right:5px; }
    .dto-mobile-topbar-button { display:grid; }
    .dto-app-bottom-nav {
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:1300;
        height:var(--dto-bottom-nav-height);
        display:grid;
        grid-template-columns:repeat(var(--dto-mobile-items,4),1fr);
        padding:7px 8px max(7px,env(safe-area-inset-bottom));
        background:rgba(255,255,255,.96);
        backdrop-filter:blur(16px);
        border-top:1px solid var(--dto-line);
        box-shadow:0 -10px 30px rgba(15,23,42,.06);
    }
    .dto-app-bottom-nav a {
        position:relative;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:4px;
        border-radius:10px;
        text-decoration:none;
        color:#64748b;
        font-size:9px;
        font-weight:750;
    }
    .dto-app-bottom-nav a i { font-size:17px; }
    .dto-app-bottom-nav a.is-active { color:var(--dto-primary-dark); background:var(--dto-primary-soft); }

    .dto-mobile-drawer-overlay {
        position:fixed;
        inset:0;
        z-index:1390;
        background:rgba(15,23,42,.42);
        opacity:0;
        visibility:hidden;
        transition:.2s ease;
    }
    .dto-mobile-drawer-overlay.is-open { display:block; opacity:1; visibility:visible; }
    .dto-mobile-drawer {
        position:fixed;
        inset:0 auto 0 0;
        z-index:1400;
        width:min(88vw,340px);
        padding:22px 16px;
        background:#111827;
        color:#fff;
        transform:translateX(-100%);
        transition:.25s ease;
        overflow:auto;
    }
    .dto-mobile-drawer.is-open { transform:translateX(0); }
    .dto-mobile-drawer .dto-app-nav-link { color:#cbd5e1; }
    .dto-mobile-drawer .dto-app-nav-link.is-active { color:#fff; }
    .dto-page-heading { align-items:center; }
}

@media (max-width: 640px) {
    .dto-app-main { padding:16px 13px 28px; }
    .dto-app-topbar { padding:0 13px; }
    .dto-page-heading { margin-bottom:17px; }
    .dto-page-heading h1 { font-size:23px; }
    .dto-page-heading p { font-size:12px; }
    .dto-card-header,.dto-card-body { padding-left:15px; padding-right:15px; }
    .dto-page-actions .dto-btn-secondary { display:none; }
    .dto-profile-menu { position:fixed; left:13px; right:13px; top:72px; width:auto; }
}