:root{
  --df10-space-1:4px;--df10-space-2:8px;--df10-space-3:12px;--df10-space-4:16px;
  --df10-space-5:20px;--df10-space-6:24px;--df10-space-8:32px;--df10-space-10:40px;--df10-space-12:48px;
  --df10-control-h:46px;--df10-touch:44px;--df10-body:14px;--df10-label:13px;--df10-meta:12px;
}
*{box-sizing:border-box}
body{margin:0;min-width:320px;font-family:var(--df10-font-ui);background:var(--df10-paper);color:var(--df10-ink)}
button,input,select{font:inherit}
button{min-height:var(--df10-touch);cursor:pointer}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.df10-card,.df10-panel{border:1px solid var(--df10-line);background:var(--df10-glass);box-shadow:var(--df10-shadow);backdrop-filter:blur(20px) saturate(1.06)}
.df10-signin{
  width:100%;min-height:100dvh;padding:22px;display:grid;gap:14px;
  grid-template-areas:var(--df10-signin-areas);grid-template-columns:var(--df10-signin-cols);grid-template-rows:var(--df10-signin-rows);
  background:
    radial-gradient(circle at 78% 6%,color-mix(in srgb,var(--df10-accent) 25%,transparent),transparent 28%),
    linear-gradient(145deg,var(--df10-bg-a),var(--df10-bg-b) 54%,var(--df10-bg-c));
  position:relative;overflow:hidden;
}
.df10-signin::before,.df10-dashboard::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.42;
  background:
    linear-gradient(120deg,transparent 8%,rgba(255,255,255,.18) 40%,transparent 68%),
    repeating-linear-gradient(90deg,transparent 0 11.8vw,rgba(255,255,255,.025) 11.8vw 12vw);
}
.df10-signin>*{position:relative;z-index:1;min-width:0}
.df10-brand{grid-area:brand;display:flex;align-items:center;gap:14px;padding:10px 14px}
.df10-logo-mark{width:62px;height:62px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(145deg,var(--df10-primary),var(--df10-action));color:#fff;font:800 34px/1 var(--df10-font-display);box-shadow:0 14px 32px color-mix(in srgb,var(--df10-primary) 28%,transparent)}
.df10-brand-name{display:block;font:800 clamp(18px,1.5vw,29px)/1 var(--df10-font-display);color:var(--df10-deep)}
.df10-brand-tagline{display:block;margin-top:5px;font-size:13px;font-weight:650;color:var(--df10-muted)}
.df10-weather{grid-area:weather;border-radius:var(--df10-radius);padding:16px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.df10-weather-icon{font-size:40px}
.df10-weather small,.df10-weather span{display:block;color:var(--df10-muted);font-size:12px}
.df10-weather strong{display:block;margin:2px 0;font-size:32px;color:var(--df10-deep)}
.df10-weather dl{display:flex;gap:12px;margin:0}.df10-weather dt{font-size:12px;color:var(--df10-muted)}.df10-weather dd{margin:0;font-weight:800}
.df10-drone{grid-area:drone;display:grid;place-items:center;pointer-events:none}
.df10-drone-body{font-size:76px;color:var(--df10-deep);filter:drop-shadow(0 14px 20px rgba(0,0,0,.18));animation:df10-hover 6s ease-in-out infinite}
.df10-hero{grid-area:hero;align-self:center;padding:clamp(18px,2vw,34px);color:var(--df10-hero-ink)}
.df10-eyebrow{display:inline-flex;padding:8px 13px;border-radius:999px;background:color-mix(in srgb,var(--df10-primary) 72%,transparent);color:#fff;font-size:12px;font-weight:850;letter-spacing:.08em}
.df10-hero h1{display:grid;gap:0;margin:18px 0 10px;font:750 clamp(42px,4.4vw,84px)/.92 var(--df10-font-display);letter-spacing:-.045em}
.df10-hero h1 strong{color:var(--df10-accent);text-shadow:0 0 24px color-mix(in srgb,var(--df10-accent) 55%,transparent)}
.df10-hero p{max-width:760px;margin:0;font-size:clamp(14px,1vw,20px);font-weight:560;line-height:1.45}
.df10-spotlight{grid-area:spotlight}.df10-news{grid-area:news}.df10-time{grid-area:time}
.df10-spotlight,.df10-news,.df10-time{border-radius:var(--df10-radius);padding:15px}
.df10-spotlight header,.df10-news header,.df10-time header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.df10-spotlight h2,.df10-news h2{margin:12px 0 6px;font-size:18px;line-height:1.15;color:var(--df10-deep)}
.df10-spotlight p,.df10-news p{margin:0;color:var(--df10-muted);font-size:12px;line-height:1.35}
.df10-time header small{display:block;color:var(--df10-muted);font-size:12px}
.df10-clock-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:10px}
.df10-clock{min-width:0;padding:8px;border:1px solid var(--df10-line);border-radius:14px;background:color-mix(in srgb,var(--df10-paper) 88%,transparent);text-align:center}
.df10-clock>strong{display:block;color:var(--df10-deep);font-size:12px}.df10-clock>small{display:block;color:var(--df10-muted);font-size:12px}
.df10-analog{position:relative;width:52px;height:52px;margin:7px auto;border:1px solid color-mix(in srgb,var(--df10-primary) 34%,transparent);border-radius:50%;background:#fff;box-shadow:inset 0 1px 5px rgba(0,0,0,.05)}
.df10-hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;width:2px;border-radius:99px;background:var(--df10-deep)}.df10-hand.hour{height:14px}.df10-hand.minute{height:19px;background:var(--df10-primary)}
.df10-clock time{display:block;font-size:13px;font-weight:800}
.df10-features{grid-area:features;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.df10-features article{padding:12px 14px;border-radius:18px;border:1px solid color-mix(in srgb,var(--df10-line) 86%,transparent);background:color-mix(in srgb,var(--df10-deep) 76%,transparent);color:#fff}
.df10-features b{display:block;font-size:12px}.df10-features span{display:block;margin-top:3px;font-size:12px;opacity:.86}
.df10-art-rail{grid-area:art;border-radius:var(--df10-radius);display:flex;align-items:flex-end;padding:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--df10-primary) 78%,transparent),color-mix(in srgb,var(--df10-deep) 88%,transparent));color:#fff}
.df10-art-rail strong,.df10-art-rail span,.df10-art-rail b{display:block;font-size:18px}
.df10-auth{grid-area:auth;align-self:center;max-height:calc(100dvh - 44px);overflow:auto;border-radius:calc(var(--df10-radius) + 4px);padding:28px}
.df10-auth header>span{font-size:12px;color:var(--df10-gold);font-weight:900;letter-spacing:.16em}.df10-auth header h2{margin:8px 0 4px;font:800 clamp(30px,2.6vw,52px)/1 var(--df10-font-display);color:var(--df10-deep);letter-spacing:-.035em}.df10-auth header p{margin:0;color:var(--df10-muted)}
.df10-auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:20px 0;padding:5px;border-radius:16px;background:color-mix(in srgb,var(--df10-primary) 9%,var(--df10-paper))}
.df10-auth-tabs button{border:0;border-radius:12px;background:transparent;font-weight:800;color:var(--df10-deep)}.df10-auth-tabs .active{background:linear-gradient(135deg,var(--df10-primary),var(--df10-action));color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--df10-primary) 26%,transparent)}
.df10-auth-form{display:grid;gap:14px}.df10-auth-form label{font-size:13px;font-weight:750;color:var(--df10-deep)}.df10-auth-form input,.df10-auth-form select{width:100%;min-height:48px;margin-top:6px;border:1px solid var(--df10-line);border-radius:12px;background:#fff;padding:0 13px;color:var(--df10-ink)}
.df10-input-row{display:grid;grid-template-columns:1fr auto;align-items:center}.df10-input-row button{margin-top:6px;border:0;background:transparent;color:var(--df10-deep);font-weight:700}
.df10-auth-options{display:flex;align-items:center;justify-content:space-between;gap:10px}.df10-auth-options label{display:flex;gap:8px;align-items:center}.df10-auth-options input{width:auto;min-height:auto;margin:0}.df10-auth-options .link{border:0;background:transparent;color:var(--df10-deep);font-weight:750}
.df10-primary{border:0;border-radius:12px;background:linear-gradient(135deg,var(--df10-primary),var(--df10-action));color:#fff;font-weight:850;box-shadow:0 14px 28px color-mix(in srgb,var(--df10-primary) 24%,transparent)}
.df10-social{margin-top:18px;padding-top:14px;border-top:1px solid var(--df10-line);text-align:center}.df10-social>span{font-size:12px;color:var(--df10-muted)}.df10-social>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.df10-social button{border:1px solid var(--df10-line);border-radius:12px;background:#fff;color:var(--df10-deep);font-weight:750}
.df10-provisional-note{display:grid;gap:4px;padding:13px;border:1px solid color-mix(in srgb,var(--df10-gold) 45%,transparent);border-radius:12px;background:color-mix(in srgb,var(--df10-gold) 8%,#fff)}
.df10-provisional-note span{font-size:12px;line-height:1.4;color:var(--df10-muted)}
.df10-auth footer{margin-top:14px;color:var(--df10-muted);font-size:12px;line-height:1.4}

/* dashboard */
.df10-dashboard{
  width:100%;min-height:100dvh;padding:14px;display:grid;gap:12px;position:relative;overflow:hidden;
  grid-template-areas:var(--df10-dash-areas);grid-template-columns:var(--df10-dash-cols);grid-template-rows:var(--df10-dash-rows);
  background:linear-gradient(145deg,var(--df10-dash-a),var(--df10-dash-b) 54%,var(--df10-dash-c));
}
.df10-dashboard>*{position:relative;z-index:1;min-width:0}
.df10-sidebar{grid-area:side;padding:16px;border-radius:var(--df10-radius);background:var(--df10-sidebar-bg);color:var(--df10-sidebar-ink);box-shadow:var(--df10-shadow);overflow:auto}
.df10-sidebar-brand{display:grid;gap:3px;padding:6px 8px 16px;border-bottom:1px solid color-mix(in srgb,var(--df10-sidebar-ink) 12%,transparent)}.df10-sidebar-brand span{font-size:12px;opacity:.72}
.df10-sidebar nav{display:grid;gap:4px;margin-top:14px}.df10-sidebar nav button{min-height:38px;border:0;border-radius:10px;background:transparent;color:inherit;text-align:left;padding:0 12px;font-weight:650}.df10-sidebar nav button.active{background:linear-gradient(135deg,var(--df10-primary),var(--df10-action));color:#fff}.df10-sidebar nav .sub{padding-left:24px;font-size:12px}
.df10-sidebar-art{margin-top:18px;padding:15px;border-radius:16px;background:linear-gradient(155deg,color-mix(in srgb,var(--df10-primary) 16%,transparent),color-mix(in srgb,var(--df10-accent) 18%,transparent));border:1px solid color-mix(in srgb,var(--df10-primary) 14%,transparent)}.df10-sidebar-art>*{display:block}
.df10-topbar{grid-area:top;display:grid;grid-template-columns:auto minmax(260px,1fr) auto auto;align-items:center;gap:12px;padding:8px 12px;border-radius:var(--df10-radius);background:var(--df10-glass);border:1px solid var(--df10-line);box-shadow:var(--df10-shadow)}
.df10-top-brand{font-weight:900;color:var(--df10-deep)}.df10-search input{width:100%;height:42px;border:1px solid var(--df10-line);border-radius:12px;padding:0 14px;background:#fff}.df10-notify,.df10-profile{border:1px solid var(--df10-line);border-radius:12px;background:#fff;color:var(--df10-deep)}.df10-profile{display:grid;grid-template-columns:auto auto;column-gap:8px;align-items:center;padding:5px 10px}.df10-profile>span{grid-row:1/3;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--df10-primary);color:#fff}.df10-profile small{font-size:12px;color:var(--df10-muted)}
.df10-dashboard-hero{grid-area:hero;padding:22px;border-radius:var(--df10-radius);background:linear-gradient(110deg,color-mix(in srgb,var(--df10-deep) 84%,transparent),color-mix(in srgb,var(--df10-primary) 44%,transparent));color:#fff;overflow:hidden}
.df10-dashboard-hero span{font-size:12px;letter-spacing:.06em;opacity:.82}.df10-dashboard-hero h1{margin:8px 0 5px;font:780 clamp(30px,3vw,56px)/1 var(--df10-font-display);letter-spacing:-.035em}.df10-dashboard-hero h1 strong{color:var(--df10-accent)}.df10-dashboard-hero p{max-width:960px;margin:0;font-size:14px;line-height:1.4}
.df10-panel{border-radius:var(--df10-radius);padding:14px;overflow:hidden}
.df10-panel header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.df10-panel h2{margin:0;font-size:16px;color:var(--df10-deep)}.df10-state{padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--df10-accent) 25%,#fff);color:var(--df10-deep);font-size:12px;font-weight:800}
.df10-policy{grid-area:policy;display:grid;gap:9px}.df10-policy label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;font-size:12px}.df10-policy select{height:36px;border:1px solid var(--df10-line);border-radius:10px;background:#fff;padding:0 9px}
.df10-sla{grid-area:sla}.df10-sla-body{display:grid;grid-template-columns:110px 1fr;gap:14px;align-items:center}.df10-ring{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;align-content:center;border:12px solid color-mix(in srgb,var(--df10-primary) 22%,#fff);border-top-color:var(--df10-primary)}.df10-ring strong{font-size:27px;color:var(--df10-deep)}.df10-ring span{text-align:center;font-size:12px;color:var(--df10-muted)}.df10-sla ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.df10-sla li{display:grid}.df10-sla li b{font-size:12px}.df10-sla li span{font-size:12px;color:var(--df10-muted)}.df10-sla>button{margin-top:8px;width:100%;border:1px solid var(--df10-line);border-radius:10px;background:color-mix(in srgb,var(--df10-accent) 12%,#fff);color:var(--df10-deep);font-weight:800}
.df10-status{grid-area:status}.df10-status select{height:34px;border:1px solid var(--df10-line);border-radius:9px;background:#fff}.df10-status-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.df10-status-grid article{padding:12px;border:1px solid var(--df10-line);border-radius:12px;background:#fff}.df10-status-grid strong{display:block;font-size:24px;color:var(--df10-deep)}.df10-status-grid span{font-size:12px;color:var(--df10-muted)}
.df10-pending{grid-area:pending}.df10-pending header{display:grid;grid-template-columns:1fr minmax(200px,340px) auto}.df10-pending header h2{margin-bottom:3px}.df10-pending header p{margin:0;color:var(--df10-muted);font-size:12px}.df10-pending header input{width:100%;height:36px;border:1px solid var(--df10-line);border-radius:10px;padding:0 10px}.df10-pending header button{min-height:36px;border:1px solid var(--df10-line);border-radius:10px;background:#fff}
.df10-filter-tabs{display:flex;gap:6px;overflow:auto;margin-bottom:8px}.df10-filter-tabs button{min-height:32px;border:0;border-radius:999px;background:color-mix(in srgb,var(--df10-primary) 7%,#fff);color:var(--df10-deep);font-size:12px}.df10-filter-tabs .active{background:var(--df10-primary);color:#fff}
.df10-table-wrap{overflow:auto}.df10-table-wrap table{width:100%;border-collapse:collapse;min-width:760px}.df10-table-wrap th,.df10-table-wrap td{padding:8px;border-bottom:1px solid var(--df10-line);text-align:left;font-size:12px;vertical-align:middle}.df10-table-wrap th{color:var(--df10-deep);font-weight:800}.df10-table-wrap td{color:var(--df10-muted)}.df10-table-wrap td:first-child{color:var(--df10-ink);font-weight:700}.df10-table-wrap button{min-height:30px;padding:0 10px;border:1px solid var(--df10-line);border-radius:8px;background:#fff;color:var(--df10-deep)}
.pill{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:12px;font-weight:800}.pill.pending{background:#fff0bd;color:#8b5a00}.pill.expired{background:#ffe1de;color:#b62a22}.pill.extended{background:#deecff;color:#1d5fb7}.pill.approved{background:#dcf5e2;color:#1c6b36}
.df10-permissions{grid-area:permissions}.df10-permission-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:8px}.df10-permission-tabs button{min-height:32px;border:0;border-radius:8px;background:color-mix(in srgb,var(--df10-primary) 6%,#fff);font-size:12px}.df10-permission-tabs .active{background:var(--df10-primary);color:#fff}.df10-permission-body{display:grid;grid-template-columns:1fr 140px;gap:10px}.df10-permission-list{display:grid;gap:6px}.df10-permission-list label{display:grid;grid-template-columns:1fr auto;align-items:center;font-size:12px}.df10-presets{display:grid;gap:6px}.df10-presets h3{margin:0 0 4px;font-size:12px}.df10-presets button{min-height:34px;border:1px solid var(--df10-line);border-radius:9px;background:#fff;color:var(--df10-deep);font-size:12px}.df10-presets .active{border-color:var(--df10-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--df10-primary) 12%,transparent)}
.df10-preview{grid-area:preview}.df10-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.df10-preview-grid article{padding:10px;border:1px solid var(--df10-line);border-radius:10px;background:#fff}.df10-preview-grid>*{display:grid}.df10-preview-grid strong{font-size:20px;color:var(--df10-deep)}.df10-preview-grid span{font-size:12px;color:var(--df10-muted)}
.df10-restrictions{grid-area:restrictions}.df10-restrictions ul{columns:2;gap:16px;margin:0;padding-left:16px}.df10-restrictions li{font-size:12px;color:var(--df10-muted);margin:4px 0}
.df10-campaign{grid-area:campaign;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,color-mix(in srgb,var(--df10-accent) 18%,#fff),color-mix(in srgb,var(--df10-primary) 13%,#fff));font-family:var(--df10-font-display);font-size:24px;color:var(--df10-deep)}
.df10-system{grid-area:system}.df10-system>div{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.df10-system b{padding:8px;border-radius:9px;background:#fff;border:1px solid var(--df10-line);font-size:12px;color:var(--df10-deep)}
.df10-settings{grid-area:settings}

@media (max-width:1180px){
  .df10-signin{grid-template-areas:"brand brand weather" "hero hero auth" "spotlight news auth" "time time auth" "features features features";grid-template-columns:1fr 1fr 390px;grid-template-rows:auto auto auto auto auto;min-height:100dvh;overflow:visible}
  .df10-drone,.df10-art-rail{display:none}
  .df10-dashboard{grid-template-areas:"top top" "hero hero" "policy sla" "status permissions" "pending pending" "preview restrictions" "campaign campaign";grid-template-columns:1fr 1fr;grid-template-rows:auto;overflow:visible}
  .df10-sidebar{display:none}
}
@media (max-width:760px){
  .df10-signin{padding:12px;grid-template-areas:"brand" "weather" "hero" "auth" "spotlight" "news" "time" "features";grid-template-columns:1fr;gap:12px}
  .df10-auth{max-height:none;padding:20px}.df10-clock-grid{grid-template-columns:repeat(2,1fr)}.df10-features{grid-template-columns:repeat(2,1fr)}
  .df10-dashboard{padding:10px;grid-template-areas:"top" "hero" "status" "policy" "sla" "pending" "permissions" "preview" "restrictions" "campaign";grid-template-columns:1fr;gap:10px}
  .df10-topbar{grid-template-columns:1fr auto auto}.df10-search{grid-column:1/-1;grid-row:2}.df10-dashboard-hero h1{font-size:34px}.df10-status-grid{grid-template-columns:repeat(2,1fr)}
  .df10-pending header{grid-template-columns:1fr}.df10-permission-body{grid-template-columns:1fr}.df10-restrictions ul{columns:1}.df10-preview-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@keyframes df10-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
