#subscription-dialog{width:min(720px,calc(100vw - 32px));max-height:90vh;border:1px solid var(--border,#d9e4e8);border-radius:20px;padding:0;background:var(--panel,#fff);color:var(--ink,#151f3b);box-shadow:0 24px 80px #151f3b40}
#subscription-dialog::backdrop{background:#151f3b99}
#subscription-dialog>header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #d9e4e8}
#subscription-dialog h2{margin:4px 0;font-size:24px}#subscription-dialog .subscription-content{padding:20px 24px;display:grid;gap:16px}
#subscription-dialog label{display:grid;gap:6px;font-size:14px;font-weight:600}#subscription-dialog input:not([type=radio]):not([type=checkbox]),#subscription-dialog select{width:100%;padding:10px 12px;border:1px solid #b8c8d8;border-radius:9px;color:inherit;background:var(--panel,#fff)}
.subscription-account,.subscription-current,.subscription-order,.subscription-payment{display:grid;gap:6px;padding:14px;border-radius:12px;background:var(--surface,#eef6f7)}
#subscription-payment-form{display:grid;gap:16px}.subscription-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.subscription-plan{border:1px solid #bccdd8;border-radius:12px;padding:12px;cursor:pointer}.subscription-plan .subscription-price{font-size:24px}.subscription-plan small{font-size:12px;font-weight:400}
#subscription-dialog .subscription-plan-title{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.5}
#subscription-dialog input:is([type=radio],[type=checkbox]){appearance:auto;display:inline-block;position:static;width:18px;height:18px;min-width:18px;max-width:18px;min-height:18px;max-height:18px;padding:0;margin:0;flex:0 0 18px;border:0;border-radius:0;box-shadow:none;accent-color:#2f817b;vertical-align:middle}
#subscription-dialog input:is([type=radio],[type=checkbox]):focus{outline:none;box-shadow:none}
#subscription-dialog input:is([type=radio],[type=checkbox]):focus-visible{outline:2px solid #2f817b;outline-offset:3px}
#subscription-dialog .subscription-consent{display:flex;gap:9px;align-items:flex-start;font-weight:400;line-height:1.6}
#subscription-dialog .subscription-consent input{margin-top:3px}
#subscription-dialog .subscription-consent-text{display:block;min-width:0;flex:1;font-size:14px;white-space:normal;overflow-wrap:break-word;text-align:left;line-height:1.6}
#subscription-dialog .subscription-content>*{min-width:0}
.subscription-entry{position:fixed;bottom:20px;left:20px;z-index:9000}#subscription-banner{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;background:#fff1d5;color:#493719}#subscription-banner[hidden]{display:none}
.subscription-read-only #view [contenteditable=false]{cursor:default}#subscription-dialog #subscription-message:empty{display:none}
@media(max-width:560px){.subscription-plans{grid-template-columns:1fr}#subscription-dialog .subscription-content,#subscription-dialog>header{padding:16px}#subscription-banner{padding:12px;flex-wrap:wrap}}
/* All menu rows share the available sidebar height; no vertical scrolling. */
@media screen {
 #app-shell #sidebar{overflow:hidden;min-height:0}
 #app-shell #side-nav{display:flex;flex-direction:column;flex:1 1 0px;justify-content:flex-start;container-type:size;container-name:sidebar-menu;min-height:0;gap:clamp(1px,.45vh,4px);margin-block:6px;padding-block:0;overflow:hidden!important;scrollbar-width:none}
 #app-shell #side-nav::-webkit-scrollbar{display:none}
 #app-shell #side-nav .sidebar-nav-group,#app-shell #side-nav .sidebar-nav-group-items{display:contents!important}
 #app-shell #side-nav .sidebar-nav-group-header{box-sizing:border-box;flex:0 0 clamp(16px,3.5cqh,24px);min-height:0;height:auto;margin:0;padding:0 10px;line-height:1.1;font-size:clamp(8px,2cqh,10px);display:flex;align-items:center}
 #app-shell #side-nav .nav-item{flex:1 1 0px;box-sizing:border-box;min-height:0;height:auto;margin:0;padding-block:0;line-height:1.15;font-size:clamp(9px,2.3cqh,13px)}
 #app-shell #side-nav .nav-item svg{width:clamp(10px,3cqh,18px);height:clamp(10px,3cqh,18px);flex:0 0 clamp(10px,3cqh,18px)}
 #app-shell #side-nav [data-subscription-open]{margin:0}
}
@container sidebar-menu (max-height:280px){
 #app-shell #side-nav .nav-item{font-size:8.5px;line-height:1.05}
 #app-shell #side-nav .nav-item svg{width:10px;height:10px;flex-basis:10px}
}
@media screen and (max-height:700px){
 #app-shell #side-nav{gap:2px;margin-block:4px}
 #app-shell #sidebar .sidebar-motto{margin-block:3px 0;padding-top:5px}
}
@media screen and (max-height:560px){
 #app-shell #side-nav{gap:1px;margin-block:3px}
 #app-shell #sidebar{padding-block:6px}
 #app-shell #sidebar .brand{min-height:40px;padding-block:2px}
 #app-shell #sidebar .brand-logo{width:34px;height:34px}
 #app-shell #sidebar .sidebar-history-controls{margin-top:3px;padding-bottom:4px}
 #app-shell #sidebar .sidebar-history-button{height:24px}
 #app-shell #sidebar .sidebar-motto{display:none}
}
@media screen and (min-width:901px){
 #app-shell.sidebar-collapsed #side-nav .sidebar-nav-group-header{display:none}
}
/* Compact account and payment copy without stacking default paragraph margins. */
#subscription-dialog>header{padding:14px 18px}
#subscription-dialog .subscription-content{padding:14px 18px;gap:10px}
#subscription-dialog .subscription-content p{margin:0;line-height:1.45}
#subscription-dialog .subscription-content label{margin:0;gap:5px}
#subscription-dialog .subscription-content :is(.subscription-account,.subscription-current,.subscription-order,.subscription-payment){padding:10px;gap:4px;line-height:1.4}
#subscription-dialog .subscription-content :is(.subscription-current,.subscription-order) span:empty{display:none}
#subscription-dialog #subscription-payment-form{gap:10px}
#subscription-dialog .subscription-plans{gap:8px}
#subscription-dialog .subscription-plan{padding:10px;gap:4px}

/* Owner-requested sidebar selection reaches the content edge in both themes. */
@media screen {
 #app-shell #side-nav { margin-right:-10px; padding-right:10px; }
 #app-shell #side-nav .nav-item.active { width:calc(100% + 10px); margin-right:-10px; border-top-right-radius:0; border-bottom-right-radius:0; }
 #app-shell.sidebar-collapsed #side-nav { margin-right:-8px; padding-right:8px; }
 #app-shell.sidebar-collapsed #side-nav .nav-item.active { width:calc(100% + 8px); margin-right:-8px; }
}

/* Seamless active navigation: use the view background and switch without colour animation. */
@media screen {
 #app-shell #side-nav .nav-item { transition:none !important; }
 #app-shell #side-nav .nav-item.active,
 :root[data-theme="dark"] #app-shell #side-nav .nav-item.active {
  background:var(--brand-cloud) !important;
  border-color:var(--brand-cloud) !important;
  color:var(--brand-ink) !important;
  box-shadow:none !important;
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
 }
 #app-shell #side-nav .nav-item.active :is(span,svg),
 :root[data-theme="dark"] #app-shell #side-nav .nav-item.active :is(span,svg) { color:inherit !important; }
 #app-shell #side-nav .nav-child-item.active::before { background:var(--brand-ink) !important; box-shadow:none !important; }
}

/* Remove the remaining blue separator and shadow between the active row and view. */
@media screen {
 #app-shell #sidebar { border-right:0 !important; box-shadow:none !important; }
}