:root { color-scheme: light dark; font: 16px/1.6 system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: CanvasText; background: light-dark(#f7f6f2, #141519); }
header, main { max-width: 1080px; margin: auto; padding: 16px clamp(16px, 4vw, 40px); }
header { display: flex; justify-content: space-between; align-items: center; }
header img { max-height: 55px; object-fit: contain; border-radius: 8px; }
a { color: light-dark(#765100, #ffdc73); }
h1 { margin: 0; font-size: 2rem; }
h2 { margin: 0 0 12px; font-size: 1.25rem; }
h3, p { margin: 0 0 8px; }
#status { min-height: 1.6em; }
#status[data-error] { color: light-dark(#a12b22, #ffb8aa); }
section, #login, dialog { background: Canvas; border: 1px solid light-dark(#e3e0d8, #46444a); border-radius: 12px; padding: 20px; }
section { margin-top: 16px; }
#login { max-width: 360px; }
#login label { display: grid; gap: 6px; margin-bottom: 14px; }
input, button { font: inherit; color: inherit; padding: 7px 12px; border: 1px solid light-dark(#bab6ab, #76717a); border-radius: 7px; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
.primary { color: #251900; background: #ffc51c; border-color: #ffc51c; font-weight: 650; }
.toolbar, .actions, .photos { display: flex; flex-wrap: wrap; gap: 8px; }
.toolbar { justify-content: flex-end; }
.reports { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 345px), 1fr)); gap: 12px; }
article { min-width: 0; border: 1px solid light-dark(#e3e0d8, #46444a); border-radius: 9px; padding: 14px; overflow-wrap: anywhere; }
article p { white-space: pre-wrap; }
.photos { margin: 8px 0 12px; }
.photos img { display: block; width: 76px; height: 76px; object-fit: cover; border-radius: 6px; }
#history { padding-left: 1.3em; margin: 0; overflow-wrap: anywhere; }
#history li + li { margin-top: 6px; }
dialog { width: min(90vw, 420px); }
dialog::backdrop { background: #0007; }
[hidden] { display: none !important; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }
.tabs [aria-current] { background: #ffc51c; color: #251900; }
.data-list { display: grid; gap: 12px; margin: 16px 0; }
.settings-grid { display: grid; gap: 16px; max-width: 440px; }
.settings-grid label, #restriction-form label { display: grid; gap: 6px; }
textarea { font: inherit; width: 100%; }
dl { display: grid; grid-template-columns: minmax(100px, 1fr) 2fr; gap: 10px; }
dt, dd { margin: 0; overflow-wrap: anywhere; }
#restriction-error { color: light-dark(#a12b22, #ffb8aa); }
.logo-frame { display:block; position:relative; width:180px; height:50px; overflow:hidden; background:#fff; border-radius:8px; }
.logo-frame img { position:absolute; width:220px; max-height:none; max-width:none; height:auto; left:-20px; top:-11px; }

.password-control { display:block; position:relative; width:100%; min-width:0; }
.password-control input { box-sizing:border-box; width:100%; padding-right:50px !important; }
.password-control .password-toggle { position:absolute; right:3px; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:44px; height:40px; min-height:0; padding:0; margin:0; border:0; border-radius:6px; background:transparent; color:inherit; cursor:pointer; }
.password-toggle .eye-slash { display:none; }
.password-toggle[aria-pressed="true"] .eye-slash { display:block; }
.password-toggle:focus-visible { outline:2px solid #886000; outline-offset:1px; }