:root{
  --df-bg:#f4f7fb;--df-surface:#fff;--df-surface-2:#f8fbff;--df-sidebar:#07192c;--df-sidebar-2:#0a233d;
  --df-ink:#10263d;--df-muted:#72869a;--df-line:#dce6f0;--df-line-2:#cbd9e7;--df-blue:#2f6df6;--df-cyan:#23c7e6;
  --df-green:#18a474;--df-amber:#c58a1e;--df-red:#c24752;--df-shadow:0 12px 34px rgba(12,39,66,.08);--df-shadow-lg:0 28px 80px rgba(3,20,38,.18);
}
html,body{min-height:100%}
body{margin:0;background:var(--df-bg)!important;color:var(--df-ink)!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.skip{position:fixed;left:-9999px;top:8px;z-index:1000}.skip:focus{left:8px;background:#fff;padding:8px 12px;border-radius:8px}

/* Login */
.df-login{min-height:100vh;background:
 radial-gradient(circle at 74% 16%,rgba(34,151,220,.18),transparent 31%),
 linear-gradient(145deg,#061421 0%,#09233d 56%,#0b2b49 100%)!important;color:#fff;display:grid;grid-template-rows:auto 1fr}
.df-login-top{height:76px;padding:0 clamp(20px,4vw,58px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07)}
.df-brand{display:flex;align-items:center;gap:11px;color:#fff!important;text-decoration:none}.df-brand strong{font-size:21px;letter-spacing:-.035em}.df-brand strong span{color:#3bd4eb}.df-brand small{display:block;margin-top:3px;font-size:8.5px;font-weight:900;letter-spacing:.15em;color:#72dceb}
.df-logo-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-weight:950;background:linear-gradient(145deg,var(--df-blue),var(--df-cyan));box-shadow:0 14px 34px rgba(47,109,246,.3)}
.df-login-actions{display:flex;align-items:center;gap:12px}.df-login-actions a{font-size:12px;color:#c4d4e3;text-decoration:none}.lang{min-width:44px;height:40px;border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.05);color:inherit;font-weight:800}
.df-login-main{width:min(1160px,calc(100% - 44px));margin:auto;display:grid;grid-template-columns:minmax(360px,470px) minmax(0,1fr);gap:72px;align-items:center;padding:56px 0}
.df-login-card{background:#fff;color:var(--df-ink);padding:42px;border-radius:28px;box-shadow:var(--df-shadow-lg)}
.df-kicker{font-size:10px;font-weight:900;letter-spacing:.16em;color:#1fb9d7}
.df-login-card h1{font-size:46px;line-height:1.03;letter-spacing:-.055em;margin:14px 0 14px}.df-login-card>p{margin:0 0 24px;color:var(--df-muted);font-size:14px;line-height:1.65}
.google-native-signin{min-height:42px}.auth-message{min-height:20px;margin:10px 0 0;color:#60778c;font-size:12px}.auth-message.error{color:var(--df-red)}
.df-login-note{margin-top:22px;padding:15px 16px;border:1px solid var(--df-line);border-radius:16px;background:#f8fbfe;display:grid;gap:5px}.df-login-note strong{font-size:12.5px}.df-login-note span{font-size:11.5px;line-height:1.5;color:var(--df-muted)}
.df-login-value{max-width:650px}.df-login-value h2{font-size:58px;line-height:1;letter-spacing:-.06em;margin:14px 0 18px}.df-login-value p{color:#adc1d3;font-size:16px;line-height:1.7;max-width:620px}
.df-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px}.df-value-grid article{min-height:108px;padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);display:flex;flex-direction:column;justify-content:space-between}.df-value-grid b{font-size:10px;letter-spacing:.08em;color:#55dcea}.df-value-grid span{font-weight:800}
.df-mode-chooser{margin-top:18px;display:grid;gap:10px}.df-mode-title{font-size:12px;font-weight:800;color:var(--df-ink)}.df-mode-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.df-mode-card{border:1px solid var(--df-line);background:#fff;border-radius:16px;padding:15px;text-align:left;display:grid;gap:4px;transition:.15s}.df-mode-card:hover{border-color:#a8c5f4;box-shadow:0 10px 24px rgba(47,109,246,.08);transform:translateY(-1px)}.df-mode-card b{font-size:13px}.df-mode-card span{font-size:11px;color:var(--df-muted);line-height:1.45}

/* Workspace shell */
.df-workspace{min-height:100vh;grid-template-columns:248px minmax(0,1fr)!important;background:var(--df-bg)!important}
.df-sidebar{position:sticky;top:0;height:100vh;padding:22px 16px 18px!important;background:linear-gradient(180deg,var(--df-sidebar),#061522)!important;border-right:1px solid rgba(255,255,255,.04);display:flex!important;flex-direction:column!important}
.df-brand.compact .df-logo-mark{width:39px;height:39px}.df-brand.compact strong{font-size:19px}
.df-identity{margin:26px 4px 22px!important;padding:14px!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.07)!important;background:rgba(255,255,255,.035)!important}.df-identity small{font-size:10px!important;color:#6f8ba3!important}.df-identity strong{display:block;margin-top:4px;font-size:14px!important;color:#fff!important}.df-identity span{display:inline-flex;margin-top:8px;padding:4px 8px;border-radius:999px;background:rgba(35,199,230,.11)!important;color:#69ddeb!important;border:1px solid rgba(105,221,235,.13)!important;font-size:9px!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.05em}
.df-role-nav{display:grid!important;gap:4px!important}.df-role-nav button{position:relative;width:100%;min-height:44px;border:0!important;border-radius:12px!important;background:transparent!important;color:#9fb3c4!important;text-align:left!important;padding:0 12px 0 44px!important;font-size:13.5px!important;font-weight:760!important;transition:.14s}.df-role-nav button:hover{background:rgba(255,255,255,.05)!important;color:#fff!important}.df-role-nav button.active{background:rgba(255,255,255,.09)!important;color:#fff!important}.df-role-nav button .df-nav-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.9}.df-role-nav button.active:after{content:"";position:absolute;left:2px;top:10px;bottom:10px;width:3px;border-radius:99px;background:linear-gradient(var(--df-cyan),var(--df-blue))}
.df-support{margin-top:auto!important;padding:12px 8px!important;display:grid!important;gap:4px!important}.df-support a{font-size:10.5px!important;color:#637f97!important;text-decoration:none!important}
.workspace-main{min-width:0}
.df-topbar{height:72px!important;padding:0 28px!important;border-bottom:1px solid var(--df-line)!important;background:rgba(255,255,255,.94)!important;backdrop-filter:blur(14px);position:sticky!important;top:0;z-index:30;display:flex;align-items:center;gap:16px}.df-user{display:grid;gap:2px}.df-user small{font-size:10px;color:var(--df-muted)}.df-user strong{font-size:13.5px}.workspace-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.workspace-actions .lang{border-color:var(--df-line)!important;background:#fff!important;color:var(--df-ink)!important}.account-switch,.avatar{height:40px;padding:0 13px;border:1px solid var(--df-line);border-radius:11px;background:#fff;color:var(--df-ink);font-weight:760;font-size:12px}.account-switch:hover,.avatar:hover{border-color:#b9cce0;background:#fbfdff}.mobile-menu{display:none}

/* Dashboard */
.dashboard{width:100%;max-width:1540px!important;margin:0 auto;padding:30px 34px 50px!important}
.dashboard-head{display:flex!important;align-items:flex-end!important;justify-content:space-between!important;gap:20px!important;margin-bottom:22px!important}.dashboard-head>div{min-width:0}.dashboard-head small{display:block;font-size:9.5px!important;font-weight:900!important;letter-spacing:.13em!important;color:#7d92a5!important}.dashboard-head h1{font-size:clamp(34px,3.3vw,50px)!important;line-height:1!important;letter-spacing:-.055em!important;margin:8px 0 9px!important;color:var(--df-ink)!important}.dashboard-head p{margin:0!important;max-width:760px;color:var(--df-muted)!important;font-size:13px!important;line-height:1.6!important}
.primary-action{min-height:46px!important;padding:0 18px!important;border:0!important;border-radius:13px!important;background:linear-gradient(135deg,var(--df-blue),#25bfe2)!important;color:#fff!important;font-weight:820!important;box-shadow:0 10px 26px rgba(47,109,246,.2)!important;transition:.15s}.primary-action:hover{transform:translateY(-1px);box-shadow:0 14px 32px rgba(47,109,246,.26)!important}
.metrics{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin:0 0 16px!important}.metric{min-height:108px!important;padding:18px 19px!important;border:1px solid var(--df-line)!important;border-radius:18px!important;background:var(--df-surface)!important;box-shadow:0 2px 10px rgba(14,43,69,.025)!important}.metric small{display:block!important;color:#7c90a3!important;font-size:11px!important;font-weight:760!important}.metric strong{display:block!important;margin-top:8px!important;font-size:31px!important;letter-spacing:-.045em!important;color:var(--df-ink)!important}
.dashboard-grid{display:grid!important;grid-template-columns:minmax(0,1.55fr) minmax(300px,.75fr)!important;gap:16px!important}.surface{border:1px solid var(--df-line)!important;border-radius:20px!important;background:var(--df-surface)!important;box-shadow:var(--df-shadow)!important;padding:20px!important}.page-surface{margin-top:16px!important}.surface-head{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:14px!important}.surface-head small{font-size:9px!important;font-weight:900!important;letter-spacing:.11em!important;color:#8498a9!important}.surface-head h2,.surface-head h3{margin:4px 0 0!important;letter-spacing:-.025em!important;color:var(--df-ink)!important}.surface-head h2{font-size:19px!important}.surface-head h3{font-size:15px!important}
.real-list{display:grid!important;gap:8px!important;margin-top:15px!important}.real-row{min-height:70px!important;border:1px solid var(--df-line)!important;border-radius:14px!important;background:#fff!important;padding:13px 14px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;transition:.14s}.real-row:hover{border-color:#c7d8e8!important;box-shadow:0 8px 24px rgba(16,44,72,.06)!important;transform:translateY(-1px)}.row-open{border:0;background:transparent;text-align:left;display:grid;gap:5px;min-width:0;flex:1}.row-open b{font-size:13.5px;color:var(--df-ink)}.row-open small{font-size:11px;color:#7b8fa1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row-meta{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}.row-meta span{padding:5px 8px;border-radius:999px;background:#eef4ff;color:#3264bb;font-size:9.5px;font-weight:850}.row-meta small{font-size:10.5px;color:#8092a2}.inline-action{min-height:30px;padding:0 9px;border:1px solid var(--df-line);border-radius:9px;background:#fff;color:#36546f;font-weight:760;font-size:10.5px}.inline-action:hover{border-color:#b5cce2;background:#f8fbff}
.sync-state{display:flex!important;align-items:center!important;gap:10px!important;padding:13px!important;border-radius:14px!important;border:1px solid #d7ece5!important;background:#eff9f5!important}.sync-state i{width:9px;height:9px;border-radius:50%;background:var(--df-green);box-shadow:0 0 0 5px rgba(24,164,116,.08)}.sync-state div{display:grid}.sync-state b{font-size:12px}.sync-state span{font-size:10.5px;color:#748a7f}
.quick-links{display:grid!important;gap:8px!important;margin-top:12px!important}.quick-links button{min-height:42px;border:1px solid var(--df-line);border-radius:11px;background:#fff;text-align:left;padding:0 12px;color:var(--df-ink);font-weight:750}.quick-links button:hover{border-color:#bed2e7;background:#f8fbff}
.empty-real{padding:42px 18px!important;border:1px dashed #d6e1ec!important;border-radius:14px!important;background:#fbfdff!important;text-align:center!important;color:var(--df-muted)!important}.empty-real strong{display:block;color:var(--df-ink);margin-bottom:6px}.empty-real p{margin:0;font-size:11.5px;line-height:1.5}
.live-error{margin-bottom:14px;padding:13px 14px;border:1px solid #f0c9cd;border-radius:13px;background:#fff4f5;color:#9c343e;font-size:11.5px}.live-error ul{margin:8px 0;padding-left:18px}
.profile-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:14px!important}.profile-grid label,.app-form-grid label{display:grid!important;gap:6px!important;font-size:10.5px!important;font-weight:780!important;color:#61788d!important}.profile-grid input,.app-form-grid input,.app-form-grid select,.app-form-grid textarea{min-height:44px!important;border:1px solid var(--df-line)!important;border-radius:11px!important;background:#fff!important;padding:0 12px!important;color:var(--df-ink)!important}.app-form-grid textarea{min-height:100px!important;padding-top:10px!important}.profile-grid input:focus,.app-form-grid input:focus,.app-form-grid select:focus,.app-form-grid textarea:focus{outline:none;border-color:#8bb0eb!important;box-shadow:0 0 0 3px rgba(47,109,246,.08)}
.parity-card{border:1px solid var(--df-line)!important;border-radius:16px!important;background:#fbfdff!important}.parity-row{border-color:var(--df-line)!important}.danger-soft{border-color:#f0c8cd!important;color:#a23f49!important;background:#fff8f8!important}
.storage-v2-card,.settings-card{border:1px solid var(--df-line)!important;border-radius:20px!important;background:#fff!important;color:var(--df-ink)!important;box-shadow:var(--df-shadow)!important;padding:20px!important}.storage-v2-card h2,.settings-card h2{color:var(--df-ink)!important}.storage-v2-card p,.settings-card p{color:var(--df-muted)!important}.storage-v2-actions button,.storage-v2-actions a{border-radius:11px!important}
.app-v2-modal,.storage-v4-modal{backdrop-filter:blur(8px)}.app-v2-modal-card,.storage-v4-modal-card{border-radius:20px!important;box-shadow:0 30px 90px rgba(5,24,42,.25)!important}
.workspace-data-loading{display:flex;align-items:center;gap:13px;min-height:90px;padding:18px;border:1px solid var(--df-line);border-radius:16px;background:#f9fbfe}.workspace-data-loading i{width:10px;height:10px;border-radius:50%;background:var(--df-cyan);box-shadow:0 0 0 6px rgba(35,199,230,.1);animation:dfPulse 1.3s ease-in-out infinite}.workspace-data-loading div{display:grid;gap:4px}.workspace-data-loading b{font-size:13px}.workspace-data-loading span{font-size:11px;color:var(--df-muted);line-height:1.5}
.df-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}.df-search{position:relative;flex:1;min-width:220px}.df-search input{width:100%;height:44px;border:1px solid var(--df-line);border-radius:12px;background:#fff;padding:0 14px 0 38px;color:var(--df-ink)}.df-search:before{content:"";position:absolute;left:14px;top:50%;width:12px;height:12px;border:2px solid #7f94a6;border-radius:50%;transform:translateY(-55%)}.df-search:after{content:"";position:absolute;left:25px;top:27px;width:6px;height:2px;background:#7f94a6;transform:rotate(45deg);border-radius:99px}.df-filter{height:44px;border:1px solid var(--df-line);border-radius:12px;background:#fff;padding:0 12px;color:var(--df-ink)}
.df-context-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid var(--df-line);border-radius:999px;background:#fff;color:#63798d;font-size:10px;font-weight:800}.df-context-pill i{width:7px;height:7px;border-radius:50%;background:var(--df-green)}
.df-section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@keyframes dfPulse{0%,100%{transform:scale(.86);opacity:.68}50%{transform:scale(1.08);opacity:1}}
@media(max-width:1080px){.metrics{grid-template-columns:repeat(2,1fr)!important}.dashboard-grid{grid-template-columns:1fr!important}.df-login-main{gap:38px}.df-login-value h2{font-size:48px}.df-section-grid{grid-template-columns:1fr}}
@media(max-width:900px){.df-workspace{grid-template-columns:1fr!important}.df-sidebar{position:fixed;left:-270px;z-index:60;width:250px;transition:.18s}.df-workspace.menu-open .df-sidebar{left:0}.mobile-menu{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--df-line);border-radius:11px;background:#fff}.df-login-main{grid-template-columns:1fr;max-width:620px}.df-login-value{order:-1}.df-value-grid{display:none}.df-login-value h2{font-size:42px}.dashboard{padding:24px!important}}
@media(max-width:640px){.df-login-main{width:min(100% - 24px,520px);padding:28px 0}.df-login-card{padding:28px 20px}.df-login-card h1{font-size:38px}.df-login-value h2{font-size:34px}.df-login-value p{font-size:14px}.dashboard{padding:18px 14px 36px!important}.dashboard-head{align-items:flex-start!important;flex-direction:column!important}.dashboard-head h1{font-size:34px!important}.metrics{grid-template-columns:1fr 1fr!important}.profile-grid{grid-template-columns:1fr!important}.workspace-actions .account-switch{display:none}.df-mode-options{grid-template-columns:1fr}}

.df-head-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:flex-end}.secondary-action{min-height:46px;padding:0 16px;border:1px solid var(--df-line);border-radius:13px;background:#fff;color:var(--df-ink);font-weight:790;font-size:12px}.secondary-action:hover{border-color:#b7cae0;background:#f9fbff}.customer-row{cursor:pointer}.customer-row>div:first-child{display:grid;gap:4px}.customer-row b{color:var(--df-ink)}.customer-row small{color:var(--df-muted);font-size:11px}
@media(max-width:640px){.df-head-actions{width:100%;justify-content:stretch}.df-head-actions>*{flex:1}.secondary-action,.primary-action{min-width:0}}

/* Production brand polish */
.df-brand-logo{display:block;width:184px;max-width:42vw;height:auto;object-fit:contain}
.df-brand.compact .df-brand-logo{width:150px;max-width:none}
.df-brand.compact{min-height:46px}
.df-login-top{background:rgba(3,18,32,.16);backdrop-filter:blur(10px)}
.df-login-card{border:1px solid rgba(255,255,255,.72)}
.df-login-card h1{max-width:390px}
.df-login-value{padding-bottom:8px}
.df-login-value h2{max-width:660px}
.df-value-grid article{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.df-sidebar .df-brand{padding:4px 5px}
.df-topbar{box-shadow:0 8px 30px rgba(20,42,66,.025)}
.df-identity{box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.df-role-nav button{letter-spacing:-.01em}
.metric,.surface,.storage-v2-card,.settings-card{box-shadow:0 10px 30px rgba(24,48,75,.055)!important}
.real-row{box-shadow:0 1px 0 rgba(17,42,68,.015)}
.primary-action:focus-visible,.inline-action:focus-visible,.account-switch:focus-visible,.avatar:focus-visible,.df-role-nav button:focus-visible{outline:3px solid rgba(47,109,246,.22);outline-offset:2px}
@media(max-width:900px){.df-brand-logo{width:164px}.df-brand.compact .df-brand-logo{width:136px}}

.df-toast{position:fixed;right:22px;bottom:22px;z-index:2000;max-width:min(420px,calc(100vw - 28px));display:grid;grid-template-columns:1fr auto;gap:4px 14px;padding:15px 16px;border-radius:15px;border:1px solid var(--df-line);background:#fff;box-shadow:0 24px 70px rgba(8,31,54,.18);animation:dfToastIn .18s ease-out}
.df-toast strong{font-size:12.5px;color:var(--df-ink)}.df-toast span{grid-column:1;font-size:11.5px;line-height:1.5;color:var(--df-muted)}.df-toast button{grid-column:2;grid-row:1/3;align-self:center;width:30px;height:30px;border:0;border-radius:9px;background:#f3f6f9;color:#5c7185;font-size:18px}.df-toast.error{border-color:#efcfd3;background:#fffafb}.df-toast.error strong{color:#a33b45}@keyframes dfToastIn{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

.google-native-signin{display:block;min-height:44px}
.df-google-signin-button{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;gap:10px;border:1px solid #d8e2ec;border-radius:10px;background:#fff;color:#2b3a49;font-weight:700;font-size:13px;box-shadow:0 1px 2px rgba(16,38,61,.03);transition:.15s}
.df-google-signin-button:hover{border-color:#b9cce0;background:#fbfdff;box-shadow:0 5px 14px rgba(16,38,61,.06)}
.df-google-signin-button:active{transform:translateY(1px)}
.df-google-signin-button:disabled{cursor:wait;opacity:.62}
.df-google-signin-button svg{width:18px;height:18px;flex:0 0 18px}
.df-google-signin-button:focus-visible{outline:3px solid rgba(47,109,246,.18);outline-offset:2px}