#options .k02-drag-handle { cursor: grab; touch-action: none; user-select: none; }
#options .k02-drag-handle:active { cursor: grabbing; }
#options { box-sizing: border-box; max-height: calc(100dvh - 24px); overflow-y: auto; }
#options { resize: both; min-width: min(320px, calc(100vw - 24px)); min-height: 240px; max-width: calc(100vw - 24px); }

/* D02: compact login only; business forms and touch targets remain unchanged. */
#options { width: min(560px, calc(100vw - 24px)); padding: 20px; border-radius: 22px; font-size: 14px; line-height: 1.4; }
#options > .row { align-items: center; gap: 12px; margin-bottom: 12px; }
#options h2 { flex: 1; font-size: 22px; line-height: 1.25; margin: 0; }
#options p { margin: 8px 0 12px; }
#options > label { margin: 10px 0; }
#options input:not([type="checkbox"]), #options select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; font-size: 16px; }
#options .remember-choice { display: flex; align-items: center; gap: 10px; min-height: 44px; }
#options .remember-choice input { flex: 0 0 auto; }
#options > button { margin: 4px 8px 4px 0; min-height: 44px; }
#options > a { display: block; margin-top: 10px; }
@media(max-width: 480px) { #options { padding: 16px; } #options h2 { font-size: 20px; } }
/* U08: bounded fields and personal layout controls. */
dialog {box-sizing:border-box;max-width:calc(100vw - 20px);max-height:calc(100dvh - 20px);overflow:auto;}
dialog input, dialog select, dialog textarea, dialog button {box-sizing:border-box;min-width:0;max-width:100%;}
dialog input[type=month],dialog input[type=date],dialog input[type=time]{width:100%;}
dialog label,dialog .row > * {min-width:0;}
dialog button{white-space:normal;overflow-wrap:anywhere;}
.u08-layout-tools{position:sticky;top:0;z-index:20;padding:10px;margin:8px 0;background:#263548;color:#fff;border:1px solid #a6b7cb;border-radius:12px;font-size:14px;}
.u08-layout-tools button{font-size:14px;min-height:36px;padding:6px 10px;margin:3px;}
.u08-layout-tools label{display:inline-flex;align-items:center;gap:6px;margin:5px;}
.u08-layout-tools input{width:85px!important;padding:4px!important;min-height:32px!important;}
.u08-layout-tools [hidden]{display:none!important;}
.u08-layout-selected{outline:3px solid #e8b650!important;outline-offset:2px;}
dialog.u08-layout-owner{resize:both;min-width:min(300px,calc(100vw - 20px));min-height:220px;}
dialog.u08-layout-owner h2{cursor:move;touch-action:none;}
/* Header stays in normal flow, so expanded navigation cannot cover branding. */
@media(min-width:720px){
 header:has(#nav){display:flex;flex-wrap:wrap;height:auto;min-height:100px;gap:16px;padding-top:16px;padding-bottom:16px;}
 header:has(#nav) .brand{flex:0 0 auto;white-space:nowrap;}
 header #nav{position:static!important;transform:none!important;width:auto;max-width:100%;margin:0;display:flex;flex:1 1 650px;flex-wrap:wrap;justify-content:center;gap:8px;}
 header .photo-profile{flex-shrink:0;}
}
.u08-brand-row{max-width:1680px;margin:0 auto;padding:10px 32px;box-sizing:border-box;}
.u08-brand-row .brand{position:static;display:inline-flex;align-items:center;gap:6px;transform:none;margin:0;font-size:28px;white-space:nowrap;}
.u08-brand-row .brand svg{width:30px;height:34px;flex:none;}
@media(max-width:719px){.u08-brand-row{padding:8px 18px;}.u08-brand-row .brand{font-size:24px;}}
.u08-layout-tools > div:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.u08-layout-tools p{grid-column:1/-1;color:#edf3fc!important;font-size:12px!important;line-height:1.4!important;margin:4px 0!important;}
.u08-layout-tools label{display:flex!important;flex-wrap:wrap;font-size:12px!important;margin:2px!important;}
.u08-layout-tools button{width:auto!important;font-size:12px!important;padding:6px!important;}
.u08-layout-tools [data-act=dialog]{grid-column:1/-1;}
@media(min-width:1100px){.u08-brand-row .brand{font-size:35px;}.u08-brand-row .brand svg{width:37.5px;height:42.5px;}}
/* U08: planned-feature note follows the dark theme. */
html[data-appearance="dark"] .planned-note{background:#263548;color:#dce6f5;border:1px solid #44516a;}
html[data-appearance="dark"] .planned-note p{color:#dce6f5;}
.u08-logo-tools{max-width:700px;margin:0 32px 12px;padding:8px 12px;border:1px solid #657992;border-radius:12px;background:#263548;color:#edf3fc;}
.u08-logo-tools[hidden]{display:none!important;}
.u08-logo-tools summary{cursor:pointer;font-size:14px;font-weight:650;color:#edf3fc!important;min-height:32px;}
.u08-logo-tools>div{display:flex;flex-wrap:wrap;align-items:end;gap:10px;padding-top:8px;}
.u08-logo-tools p{flex-basis:100%;font-size:13px;color:#edf3fc!important;margin:4px 0;}
.u08-logo-tools label{display:flex;flex-direction:column;font-size:13px;gap:4px;}
.u08-logo-tools input{width:95px;min-width:0;padding:6px;border:1px solid #879bb5;border-radius:8px;background:#1c2737;color:#fff;}
.u08-logo-tools button{background:#34465c;color:#fff;font-size:13px;}
@media(max-width:719px){.u08-logo-tools{margin:0 18px 10px;}}
/* U08 personal logo settings float without occupying page space. */
dialog.u08-logo-tools{position:fixed;inset:100px 24px auto auto;width:min(420px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);margin:0;padding:16px;z-index:100;overflow:auto;box-shadow:0 12px 40px #0006;border-radius:16px;}
dialog.u08-logo-tools:not([open]),.u08-logo-profile-button[hidden]{display:none!important;}
.u08-logo-tools .u08-logo-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:move;touch-action:none;user-select:none;padding:0 0 10px;border-bottom:1px solid #657992;}
@media(max-width:599px){dialog.u08-logo-tools{top:16px;right:12px;}}
.u08-planning-actions{display:flex;flex-direction:column;gap:14px;}
.u08-planning-actions>h2{margin:0;}
.u08-planning-actions>button{width:100%;min-width:0;max-width:100%;margin:0;white-space:normal;box-sizing:border-box;}