:root{
  --cream:#FDF9F4; --cream-soft:#FFF9F2; --orange:#FF6600;
  --orange-soft:#FFF4EC; --charcoal:#1A1A1A;
  --muted:rgba(26,26,26,0.45); --border:#FFE4CC; --card-radius:20px;
  --font:"Nunito",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--charcoal);font-family:var(--font);font-weight:400}

#dusha-gate{position:fixed;inset:0;background:var(--cream);display:flex;align-items:center;justify-content:center;z-index:9999}
.gate-card{background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);padding:48px 56px;text-align:center;box-shadow:0 8px 32px rgba(255,102,0,.08)}
.gate-card h1{margin:0;font-weight:900;font-size:40px}
.gate-sub{color:var(--muted);margin:4px 0 24px}
.gate-card button{background:var(--orange);color:#fff;border:0;border-radius:12px;padding:14px 28px;font-family:var(--font);font-weight:700;font-size:16px;cursor:pointer}
.gate-err{color:#c00;margin-top:12px;font-size:13px}

#dusha-header{display:flex;align-items:center;gap:32px;padding:20px 40px;background:var(--orange);border-bottom:none}
.logo{font-weight:900;font-size:24px;color:#fff}.logo span{color:#fff;opacity:0.75}
.nav-top{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.nav-link{text-decoration:none;color:#fff;font-weight:700;font-size:12px;padding:8px 14px;border-radius:999px}
.nav-link.active{background:var(--orange-soft);color:var(--orange)}
.logout{background:none;border:0;color:#fff;font-weight:900;font-family:var(--font);cursor:pointer;font-size:13px}

.dusha-body{display:grid;grid-template-columns:260px 1fr;gap:24px;padding:24px 40px;max-width:1600px;margin:0 auto}
#dusha-sidebar{background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);padding:20px;height:fit-content}
.user-card{display:flex;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--border);margin-bottom:16px}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}
.uname{font-weight:900;font-size:14px}.umail{color:var(--muted);font-size:11px}
.side-label{font-size:11px;color:var(--muted);font-weight:700;letter-spacing:.08em;margin-bottom:8px}
.side-nav{display:flex;flex-direction:column;gap:4px}
.side-item{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--charcoal);font-weight:700;font-size:14px}
.side-item.active{background:var(--orange-soft);color:var(--orange)}
.side-item .ic{font-size:18px}

main{background:#fff;border:1px solid var(--border);border-radius:var(--card-radius);padding:32px}
#dusha-telemetry{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
.tile{border:1px solid var(--border);border-radius:14px;padding:14px 16px;background:var(--cream-soft)}
.tile-label{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.tile-value{font-size:22px;font-weight:900;margin-top:4px}
.tile-group-label{grid-column:1/-1;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;margin-top:12px;padding-bottom:2px;border-bottom:1px solid var(--border)}
.tile-group-label:first-child{margin-top:0}

/* Hardware groups wrapper: display:contents lets children flow into parent
   grid. hw-hidden collapses the entire section (used on mobile). */
.hw-wrap{display:contents}
.hw-wrap.hw-hidden{display:none !important}
.hw-toggle{grid-column:1/-1;background:var(--cream-soft);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-family:var(--font);font-weight:700;font-size:13px;cursor:pointer;color:var(--muted);margin-top:16px;text-align:left}
.hw-toggle:hover{background:var(--orange-soft);color:var(--orange)}

/* Tasks widget layout */
.tasks-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

@media(max-width:1100px){.dusha-body{grid-template-columns:1fr}#dusha-telemetry{grid-template-columns:repeat(2,1fr)}}

@media(max-width:768px){
  #dusha-header{padding:14px 16px;gap:12px;flex-wrap:wrap}
  .logo{font-size:18px}
  .nav-top{gap:4px;order:3;width:100%;margin-top:6px}
  .nav-link{font-size:11px;padding:6px 10px}
  #dusha-clock{right:16px !important;top:12px !important}
  #dusha-clock-time{font-size:16px !important}
  #dusha-clock-date{display:none !important}
  .logout{font-size:12px}
  .dusha-body{padding:16px;gap:16px}
  main{padding:20px 16px}
  main h1{font-size:26px !important}
  main h2{font-size:18px !important}
  main p{font-size:14px}
  #dusha-telemetry{grid-template-columns:repeat(2,1fr);gap:10px}
  .tile{padding:10px 12px}
  .tile-value{font-size:18px}
  #dusha-sidebar{padding:16px}
  .gate-card{padding:28px 24px;margin:0 16px;max-width:calc(100% - 32px)}
  .gate-card h1{font-size:28px}
  [id^="yt-"]{overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  [id^="yt-"] table{min-width:480px}

  /* Tasks: single column, larger tap targets for daily mobile use */
  .tasks-grid{grid-template-columns:1fr;gap:18px}
  .tasks-new{gap:8px !important}
  .tasks-input{min-height:48px !important;font-size:16px !important;flex:1 1 100% !important}
  .tasks-select{min-height:48px !important;font-size:14px !important;flex:1 1 calc(50% - 4px) !important}
  .tasks-addbtn{min-height:48px !important;min-width:56px !important;font-size:22px !important;flex:1 1 100% !important}
  .tasks-filter{gap:8px !important}
  .tasks-filter-btn{min-height:40px !important;padding:8px 14px !important;font-size:13px !important}
  .task-row{padding:14px 0 !important;gap:8px !important}
  .task-row input[type="checkbox"]{width:22px !important;height:22px !important}
  .task-row button[data-task-delete]{font-size:26px !important;padding:6px 12px !important}

  /* Calendar rows: time and title each on their own line when cramped */
  .cal-row{padding:10px 0 !important;gap:6px !important}
  .cal-time{min-width:0 !important}
  .cal-title{flex-basis:100% !important;font-size:15px !important}

  /* Hardware tiles: collapsed by default on mobile (toggle via .hw-toggle) */
  .hw-toggle{font-size:14px;padding:12px 14px}

  /* Traffic detail stacks on mobile */
  .traffic-detail-grid{grid-template-columns:1fr !important;gap:12px !important}
  .traffic-row [data-traffic-expand]{min-width:48px !important;min-height:40px !important;font-size:18px !important}
}

@media(max-width:480px){
  #dusha-header{padding:12px;gap:8px}
  .logo{font-size:16px}
  .nav-link{font-size:10px;padding:5px 8px}
  #dusha-clock-time{font-size:14px !important}
  .dusha-body{padding:12px;gap:12px}
  main{padding:16px 12px}
  main h1{font-size:22px !important}
  main h2{font-size:16px !important}
  #dusha-telemetry{grid-template-columns:1fr;gap:8px}
  .tile{padding:12px 14px}
  .tile-value{font-size:20px}
  .tile-label{font-size:9px}
  #dusha-sidebar{padding:14px}
  .user-card{padding-bottom:12px;margin-bottom:12px}
  .uname{font-size:13px}
  .umail{font-size:10px}
  .side-item{font-size:13px;padding:8px 10px}
  .side-item .ic{font-size:16px}
  .gate-card{padding:20px 16px}
  .gate-card h1{font-size:22px}
  .gate-sub{font-size:13px}
  .gate-card button{padding:10px 20px;font-size:14px}
}