/* Dula Web · Fluent design system.
   Art direction: restrained Windows 11 / Fluent 2; Taste Skill spacing and hierarchy.
   Responsive content, no external fonts, scripts or UI dependencies. */
:root {
  color-scheme: light;
  --bg:#F5F6F9; --surface:#FFFFFF; --surface-soft:#FAFBFD;
  --ink:#20242B; --muted:#657181; --subtle:#7B8492;
  --line:#E2E6ED; --line-strong:#C9D0DA;
  --accent:#0969DA; --accent-hover:#0759B8; --accent-soft:#EBF3FF;
  --success:#196447; --success-soft:#EAF6EF;
  --danger:#B2263A; --danger-soft:#FFF1F3;
  --warn:#805A14; --warn-soft:#FFF6E8;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 3px rgba(29,41,57,.04);
  --font:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--font);font-size:14px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
body{margin:0;min-height:100vh;line-height:1.6}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}
:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
h1,h2,h3,p{overflow-wrap:anywhere}
h1{font-size:clamp(24px,2.8vw,32px);font-weight:690;line-height:1.2;letter-spacing:-.75px;margin:0}
h2{font-size:18px;font-weight:650;line-height:1.35;letter-spacing:-.3px;margin:0}
h3{font-size:14px;font-weight:650;margin:0}
p{margin:0;color:inherit;line-height:1.6}
small{font-size:12px}
code{font:inherit;font-family:Consolas,ui-monospace,monospace;font-size:.9em;overflow-wrap:anywhere}
.muted{color:var(--muted)}
.eyebrow{display:block;font-size:10px;line-height:1.5;letter-spacing:1.1px;color:#507399;font-weight:750;text-transform:uppercase}
.skip-link{position:fixed;top:-100px;left:12px;z-index:100;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
.skip-link:focus{top:12px}
.shell{min-height:100vh}
.site-shell{display:flex;flex-direction:column}
.site-main{flex:1}
.main{width:min(1180px,100%);margin:0 auto;padding:38px 30px 66px;min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);min-width:0}
.below{margin-top:20px}
.page-heading{margin-bottom:26px;max-width:780px}
.page-heading .eyebrow{margin-bottom:9px}
.page-heading h1{margin-bottom:7px}
.page-heading p{color:var(--muted);font-size:14px}
.grid{display:grid;gap:16px;min-width:0}
.grid.one{grid-template-columns:minmax(0,1fr)}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
/* Buttons and form controls */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;max-width:100%;padding:8px 16px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:#fff;color:#303945;font-size:13px;line-height:1.35;font-weight:620;text-align:center;white-space:normal;overflow-wrap:anywhere;transition:background-color .16s,border-color .16s,color .16s}
.btn:hover{background:#F1F4F8;border-color:#B5C0CC;color:var(--ink);text-decoration:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff}
.btn.small{min-height:36px;padding:7px 12px;font-size:12px}
.btn.full{display:flex;width:100%;margin-top:16px}
.btn.danger-btn{color:var(--danger);background:#fff;border-color:#E6C6CF}
.btn.danger-btn:hover{background:var(--danger-soft)}
.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px}
.inline{display:inline-flex;vertical-align:middle;margin:0;max-width:100%}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:16px}
form{margin:0;min-width:0}
label{display:block;font-size:12.5px;font-weight:620;color:#3A4554;margin:14px 0;min-width:0}
label small{display:block;font-weight:450;color:var(--muted);margin-top:5px}
input:not([type=checkbox]):not([type=radio]),textarea,select{display:block;width:100%;max-width:100%;min-width:0;min-height:40px;padding:9px 11px;margin-top:7px;background:#fff;color:var(--ink);border:1px solid #CBD3DE;border-radius:var(--radius-sm);line-height:1.45}
input:not([type=checkbox]):focus,textarea:focus,select:focus{border-color:#70A6E7;box-shadow:0 0 0 3px rgba(9,105,218,.12);outline:none}
input::placeholder{color:#8993A0}
.checklabel{display:flex;align-items:flex-start;gap:10px;line-height:1.5;margin:16px 0;cursor:pointer;font-weight:520}
.checklabel input{flex:none;width:17px;height:17px;margin:2px 0 0;accent-color:var(--accent)}
.notice{border-radius:9px;padding:13px 16px;border:1px solid #C6DCF4;color:#285D92;background:#EEF6FF;margin:0 0 18px;line-height:1.6;overflow-wrap:anywhere}
.notice.success{border-color:#C9E5D3;background:var(--success-soft);color:var(--success)}
.notice.warning{border-color:#EED7AD;background:var(--warn-soft);color:var(--warn)}
.notice.error{border-color:#EBC6CE;background:var(--danger-soft);color:var(--danger)}
.notice ul{padding-left:18px;margin:8px 0 0}
.status-pill{display:inline-flex;align-items:center;gap:6px;flex:none;align-self:flex-start;border-radius:100px;border:1px solid var(--line);background:#F5F6F8;color:#637084;font-size:11px;font-weight:660;padding:5px 10px;white-space:nowrap}
.status-active{background:var(--success-soft);color:var(--success);border-color:#CEE5D7}
.status-inactive{background:#F2F4F6;color:#5C6676;border-color:#E0E4E9}
.status-pending{background:var(--warn-soft);color:var(--warn);border-color:#EFDEBA}
/* Shared header */
.topbar{background:#fff;border-bottom:1px solid var(--line)}
.topbar-inner{display:flex;align-items:center;gap:20px;width:min(1180px,100%);min-height:72px;padding:12px 30px;margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:730;letter-spacing:-.55px;white-space:nowrap;color:var(--ink)}
.brand:hover{color:var(--ink);text-decoration:none}
.brandmark{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:11px;border:1px solid #D3E4FA;background:#E9F3FF;color:#1667BD;font-size:19px}
.brandmuted{font-weight:480;color:#637182}
.mainnav{display:flex;align-items:center;gap:6px;min-width:0;margin-left:auto}
.mainnav a{padding:8px 11px;border-radius:8px;color:#4A5667;white-space:nowrap;font-size:12.5px;font-weight:590}
.mainnav a:hover{background:#F1F4F8;text-decoration:none;color:#1E2A38}
.topbar-inner>form.inline{margin-left:4px;flex:none}
.footer{display:flex;justify-content:center;align-items:center;padding:18px 24px;border-top:1px solid var(--line);font-size:11.5px;color:var(--subtle)}
/* Admin workspace */
.workspace-shell{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;min-width:0;padding:23px 12px 18px;background:#FAFBFD;border-right:1px solid var(--line)}
.sidebar-brand{margin:0 11px 32px}
.sidebar-group-title{margin:0 13px 12px;color:#8A94A3;font-weight:750;font-size:10px;letter-spacing:1.1px}
.sidebar-nav{display:grid;gap:3px}
.nav-link{display:flex;align-items:center;min-height:42px;padding:9px 13px;border-radius:9px;color:#526071;line-height:1.35;font-weight:590;font-size:13px;white-space:nowrap}
.nav-link:hover{color:#26374A;background:#EFF2F6;text-decoration:none}
.nav-link.is-active,.nav-link[aria-current=page]{background:#EAF2FF;color:#095EBA;font-weight:700}
.sidebar-bottom{margin-top:auto;padding:16px 11px 0;border-top:1px solid var(--line);color:var(--subtle);font-size:11px}
.work-area{display:flex;flex-direction:column;min-width:0;min-height:100vh}
.workspace-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:65px;padding:12px clamp(20px,3vw,42px);border-bottom:1px solid var(--line);background:#fff}
.breadcrumbs{min-width:0;color:#7A8594;font-size:12px}
.breadcrumbs strong{color:#3A4553;font-weight:650}
.profile{display:flex;align-items:center;gap:12px;min-width:0}
.profile-name{display:block;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:600;color:#5C6677}
.workspace-main{width:min(1460px,100%);max-width:1460px;padding:34px clamp(20px,3vw,42px) 64px}
/* Landing / customer home */
.home-main{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 140px)}
.home-minimal{margin:auto;max-width:460px;text-align:center;padding:54px 8px 72px}
.home-symbol{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 22px;border:1px solid #D5E5FA;border-radius:17px;background:#EDF5FF;color:#1669BD;font-size:24px}
.home-minimal h1{font-size:clamp(32px,5vw,42px);letter-spacing:-1.25px}
.home-minimal p{margin:12px auto 26px;color:var(--muted);max-width:370px}
.home-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}
.home-actions .btn{min-width:128px}
.home-main.home-logged{display:block;min-height:0;padding-top:44px}
.home-dashboard{width:min(100%,1030px);margin:auto}
.dashboard-welcome{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:22px}
.dashboard-welcome h1{font-size:clamp(25px,3vw,33px);margin:7px 0}
.dashboard-welcome p{color:var(--muted)}
.home-license{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;padding:28px}
.license-summary h2{font-size:24px;margin:8px 0 5px}
.license-summary p{color:var(--muted)}
.home-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:16px}
.home-link{display:flex;flex-direction:column;align-items:start;gap:7px;color:var(--ink);min-height:142px;transition:border-color .14s,transform .14s}
.home-link:hover{border-color:#A8C8ED;transform:translateY(-2px);text-decoration:none;color:var(--ink)}
.home-link-mark{display:grid;place-items:center;width:34px;height:34px;background:#EDF4FE;color:#2466B0;border-radius:9px;font-size:17px}
.home-link strong{font-size:15px;line-height:1.35}
.home-link>span:last-child{font-size:12px;color:var(--muted)}
.free-offer{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.free-offer>div{flex:1 1 260px;min-width:0}
.free-offer h2{margin-bottom:6px}
.free-offer form{flex:none}
.free-reset-note{margin-top:6px;color:#8A5C17;font-size:12px;line-height:1.55}
.free-plan{border-color:#D2E2F6}
.free-plan .eyebrow{color:#266AAD}
.free-claimed{color:var(--muted);font-weight:600;font-size:12px}
/* Auth */
.auth-wrap{width:min(100%,460px);margin:12px auto 55px}
.auth-card{padding:34px 36px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 3px 14px rgba(26,45,73,.04)}
.auth-card h1{margin:15px 0 6px;font-size:25px}
.auth-card>p.muted{font-size:13px;margin-bottom:24px}
.auth-card form label{margin-top:16px}
.auth-card .btn.full{margin-top:22px}
.auth-alt{margin-top:24px;text-align:center;color:var(--muted);font-size:12.5px}
.icon-square{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#EEF5FF;color:var(--accent);font-size:20px}
/* Accounts, plans, payment */
.stat{min-width:0}
.stat span{color:#7C8594;font-weight:740;font-size:10.5px;letter-spacing:.8px;text-transform:uppercase}
.stat h2{margin:10px 0 7px;font-size:clamp(18px,2.1vw,25px);overflow-wrap:anywhere}
.stat .btn{margin-top:9px}
.plan{display:flex;flex-direction:column;min-width:0;gap:0}
.plan h2{font-size:20px;margin:8px 0}
.plan-price{font-size:clamp(24px,2.5vw,30px);line-height:1.2;letter-spacing:-.5px;font-weight:720;margin:18px 0 12px}
.plan>form{margin-top:auto;padding-top:20px}
.plan .free-reset-note{margin-top:8px}
.kv{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:12px 0}
.kv:last-of-type{border-bottom:0}
.kv span{font-size:12px;color:var(--muted);flex:0 0 auto}
.kv strong{font-size:13px;text-align:right;min-width:0;max-width:64%;overflow-wrap:anywhere}
.container-narrow{max-width:650px}
.recovery{display:block;word-break:break-word;padding:16px;background:#F3F6F9;border:1px solid var(--line);border-radius:8px;line-height:2.1}
.code{display:inline-block;border-radius:6px;padding:3px 6px;background:#EEF4FF}
/* Tables are reserved for history; actions are never squeezed into data cells. */
.table-wrap{overflow-x:auto;max-width:100%;padding:0}
.table-wrap>h2{padding:20px 20px 0}
table{border-collapse:collapse;width:100%;min-width:580px;text-align:left}
th,td{padding:13px 16px;border-bottom:1px solid #EDF0F3;vertical-align:top;text-align:left;overflow-wrap:anywhere}
th{white-space:nowrap;text-transform:uppercase;font-size:10.5px;letter-spacing:.45px;background:#FAFBFC;color:#697587}
td{font-size:12.5px}
td small,td code{display:block;margin-top:5px}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#FBFCFF}
/* Admin: compact cards instead of the overflowing customer/order table. */
.customer-list,.plan-list,.order-list{display:grid;gap:14px;min-width:0}
.customer-card,.catalog-plan,.order-card{padding:22px 24px}
.customer-card-head,.catalog-plan-head,.order-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;min-width:0}
.customer-identity,.catalog-plan-head>div,.order-card-head>div{min-width:0}
.customer-card h2,.catalog-plan h2,.order-card h2{margin:5px 0 3px;font-size:17px}
.customer-card-head p,.catalog-plan-head p,.order-card-head p{font-size:12.5px;overflow-wrap:anywhere}
.customer-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:21px 0 0;padding:16px 0;border-block:1px solid var(--line)}
.customer-facts>div{min-width:0}
.customer-facts dt{font-size:11px;color:var(--muted);margin-bottom:5px}
.customer-facts dd{font-size:12.5px;font-weight:630;margin:0;overflow-wrap:anywhere}
.customer-details,.edit-block,.order-confirm{margin-top:16px;min-width:0}
.customer-details>summary,.edit-block>summary,.order-confirm>summary{cursor:pointer;color:#1C5FA8;font-weight:640;font-size:12.5px;width:fit-content;max-width:100%;padding:7px 0}
.customer-details[open]>summary,.edit-block[open]>summary,.order-confirm[open]>summary{margin-bottom:14px}
.customer-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-width:0}
.control-group{border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);padding:16px;min-width:0}
.control-group h3{margin-bottom:5px}
.control-group>p{font-size:11.5px}
.compact-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-top:12px}
.compact-form label{margin:0;flex:1 1 85px;min-width:0}
.compact-form .btn{flex:0 0 auto}
.grant-compact label:first-of-type{flex:0 1 82px}
.grant-compact label:nth-of-type(2){flex:1 1 140px}
.control-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.control-actions .inline{display:inline-flex}
.setup-panel .form-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(100px,1fr) minmax(130px,1fr) auto;align-items:end;gap:14px;margin-top:12px}
.form-grid label{margin:0}
.form-grid .btn{margin-bottom:0}
.catalog-plan-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.catalog-plan .edit-block{border-top:1px solid var(--line);padding-top:8px}
.edit-plan-form{display:grid;grid-template-columns:minmax(0,2fr) minmax(100px,1fr) minmax(120px,1fr) auto;gap:12px;align-items:end}
.edit-plan-form label{margin:0}
.order-card-meta{display:flex;align-items:baseline;gap:12px 24px;flex-wrap:wrap;margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.order-card-meta strong{color:var(--ink);font-size:17px}
.order-confirm{border-top:1px solid var(--line);padding-top:9px}
.order-confirm>p{font-size:12px}
.order-confirm-actions{display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin-top:12px}
.payment-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.payment-form label{margin:0;flex:1 1 165px;max-width:220px}
.payment-form .btn{margin-bottom:0}
.empty-state{color:var(--muted);text-align:center;padding:40px}
/* Settings and general admin panels */
.free-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:14px;max-width:600px}
.settings-free{max-width:860px}
.settings-free>p,.panel>p.muted{margin:9px 0 18px}
.panel>h2:first-child{margin-bottom:9px}
.panel>form>.btn:last-child{margin-top:6px}
/* Larger responsive stepping: less competing content, stable gutters. */
@media(max-width:1180px){
  .workspace-shell{grid-template-columns:204px minmax(0,1fr)}
  .sidebar{padding-inline:9px}.sidebar-brand{margin-inline:8px}
  .customer-controls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .setup-panel .form-grid,.edit-plan-form{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .grid.four,.grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .customer-controls{grid-template-columns:minmax(0,1fr)}
  .home-links{gap:12px}
}
@media(max-width:780px){
  .workspace-shell{display:flex;flex-direction:column}
  .sidebar{position:static;height:auto;padding:12px 16px 10px;border-right:0;border-bottom:1px solid var(--line)}
  .sidebar-brand{margin:0 0 10px}
  .sidebar-group-title,.sidebar-bottom{display:none}
  .sidebar-nav{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:thin;padding-bottom:3px}
  .sidebar-nav .nav-link{flex:none;min-height:36px;padding:7px 10px;font-size:12px}
  .workspace-header{min-height:54px;padding:10px 18px}
  .workspace-main{padding:26px 18px 54px}
  .main{padding:32px 18px 55px}
  .topbar-inner{flex-wrap:wrap;padding:12px 18px;gap:9px 14px}
  .topbar-inner .brand{margin-right:auto}
  .mainnav{order:3;flex:1 0 100%;overflow-x:auto;margin-left:0;padding:4px 0 0;gap:4px;scrollbar-width:thin}
  .mainnav a{flex:none;padding:7px 10px}
  .grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-main.home-logged{padding-top:30px}
}
@media(max-width:580px){
  .main{padding:27px 16px 48px}
  .workspace-main{padding:24px 16px 48px}
  .workspace-header{padding:9px 16px;gap:8px}
  .workspace-header .profile-name{display:none}
  .breadcrumbs{font-size:11px;overflow-wrap:anywhere}
  .panel{padding:18px}
  .grid.two,.grid.three,.grid.four{grid-template-columns:minmax(0,1fr);gap:12px}
  .page-heading{margin-bottom:20px}
  .dashboard-welcome{margin-bottom:17px}
  .home-license{padding:20px;flex-wrap:wrap}
  .home-links{grid-template-columns:minmax(0,1fr)}
  .home-link{min-height:0;padding:17px 18px}
  .home-link-mark{width:30px;height:30px}
  .free-offer{align-items:stretch;gap:14px}
  .free-offer form,.free-offer form .btn{width:100%}
  .auth-wrap{margin:6px auto 45px}
  .auth-card{padding:26px 22px}
  .auth-card h1{font-size:23px}
  .customer-card,.catalog-plan,.order-card{padding:18px}
  .customer-card-head,.catalog-plan-head,.order-card-head{gap:10px}
  .customer-card-head .status-pill,.catalog-plan-head .status-pill,.order-card-head .status-pill{font-size:10px}
  .customer-facts{grid-template-columns:minmax(0,1fr);gap:12px}
  .customer-facts>div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:baseline}
  .customer-facts dt{margin:0}
  .compact-form,.payment-form{align-items:stretch;flex-direction:column}
  .compact-form label,.payment-form label,.compact-form .btn,.payment-form .btn,.grant-compact label:first-of-type,.grant-compact label:nth-of-type(2){width:100%;max-width:100%;flex:none}
  .setup-panel .form-grid,.edit-plan-form,.free-settings-grid{grid-template-columns:minmax(0,1fr)}
  .order-card-meta{gap:6px;display:grid}
  .kv{align-items:start;flex-direction:column;gap:3px}
  .kv strong{text-align:left;max-width:100%}
  .footer{padding:16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Dula Key manager — Fluent/Taste hierarchy, calm whitespace, no crowded tables. */
.key-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;min-width:0;margin:16px 0}
.key-card{display:flex;flex-direction:column;align-items:stretch;gap:14px;min-width:0}
.key-card>p{color:var(--muted);font-size:13px}
.key-card>.btn{align-self:flex-start}
.key-card-title{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;min-width:0}
.key-card-title strong{font-size:17px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.key-card-title .status-pill{margin:0}
.key-rename-form{display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin:0}
.key-rename-form label{flex:1 1 170px;margin:0}
.key-rename-form .btn{flex:0 0 auto}
.key-link{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border-radius:10px;border:1px solid var(--line);background:var(--surface-soft);min-width:0;color:var(--ink);transition:border-color .15s,background .15s}
.key-link:hover,.key-link.is-selected{border-color:#90B9EA;background:var(--accent-soft);text-decoration:none}
.key-link strong,.key-link small{overflow-wrap:anywhere}
.key-link small{color:var(--muted)}
.key-purchase{display:flex;flex-direction:column;gap:8px;min-width:0;padding:16px;background:var(--surface-soft);border:1px solid var(--line);border-radius:10px}
.key-purchase>span{color:var(--muted);font-size:12px}
.key-purchase .btn{margin-top:5px}
.key-select-option{display:flex;align-items:center;gap:14px;border:1px solid var(--line);padding:16px;border-radius:10px;margin:10px 0;cursor:pointer;background:var(--surface-soft)}
.key-select-option:has(input:checked){border-color:#85B2E9;background:var(--accent-soft)}
.key-select-option input{width:18px;height:18px;flex:none;margin:0;accent-color:var(--accent)}
.key-select-option span{display:flex;flex-direction:column;gap:3px;min-width:0}
.key-select-option strong{font-weight:650;font-size:15px}
.key-select-option small{font-weight:400;color:var(--muted)}
.admin-key-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));gap:10px;margin:14px 0 5px;min-width:0}
.admin-key-row{display:flex;flex-direction:column;gap:2px;border-radius:9px;background:var(--surface-soft);border:1px solid var(--line);padding:10px 14px;min-width:0}
.admin-key-row strong{font-size:13px;overflow-wrap:anywhere}
.admin-key-row span{color:var(--muted);font-size:12px;overflow-wrap:anywhere}
@media(max-width:560px){.key-grid{grid-template-columns:minmax(0,1fr)}.key-card{padding:18px}.key-select-option{padding:14px}.key-rename-form .btn{width:100%}}
@media(min-width:581px){.home-links{grid-template-columns:repeat(2,minmax(0,1fr))}}