*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --brown:#6b3f1e; --cream:#fdf6ec; --warm:#fff9f2; --accent:#d4873a; --accent-dk:#b86e22;
  --border:#e2c9a8; --text:#3d2a14; --muted:#7a5c3e; --success:#4a7c59; --danger:#a33333;
  --success-bg:#edf7f1; --danger-bg:#fdf0f0; --radius:14px;
}
body { font-family:'Segoe UI', system-ui, sans-serif; background:linear-gradient(180deg, #f7efe4 0%, #f3eadf 100%); color:var(--text); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 24px 112px; line-height:1.5; }
.app-version-badge { position:fixed; left:12px; bottom:10px; z-index:20; display:inline-flex; align-items:center; max-width:calc(100vw - 20px); padding:0; background:transparent; border:0; color:var(--muted); font-size:.68rem; font-weight:600; letter-spacing:0; opacity:.55; pointer-events:none; }
.box { width:100%; max-width:580px; background:linear-gradient(180deg, rgba(255,253,250,.98) 0%, rgba(255,248,240,.95) 100%); border:1px solid rgba(107,63,30,.12); border-radius:22px; box-shadow:0 18px 40px rgba(107,63,30,.08); padding:34px 28px; }
.logo { display:flex; justify-content:center; margin-bottom:12px; }
.logo img { display:block; width:76px; height:76px; object-fit:contain; border-radius:14px; }
h1 { text-align:center; color:var(--brown); font-size:1.45rem; }
.sub { text-align:center; color:var(--muted); line-height:1.6; margin:10px auto 24px; max-width:40ch; }
.panel { background:rgba(255,255,255,.76); border:1px solid rgba(107,63,30,.08); border-radius:16px; padding:16px; margin-bottom:14px; }
.label { font-size:.74rem; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.14em; margin-bottom:6px; }
.value { font-weight:800; color:var(--brown); font-size:1.05rem; }
.meta { color:var(--muted); margin-top:4px; overflow-wrap:anywhere; }
.field { margin-top:12px; }
.field:first-of-type { margin-top:0; }
.field label { display:block; font-size:.82rem; font-weight:700; color:var(--brown); margin-bottom:6px; }
.input { width:100%; border:1px solid rgba(107,63,30,.16); background:white; border-radius:12px; padding:13px 14px; font:inherit; color:var(--text); }
.input:focus { outline:none; border-color:rgba(212,135,58,.9); box-shadow:0 0 0 3px rgba(212,135,58,.16); }
.hint { margin-top:10px; color:var(--muted); font-size:.84rem; line-height:1.5; }
.notice { border-radius:12px; padding:12px 14px; margin-bottom:16px; font-size:.88rem; line-height:1.5; }
.notice.warn { background:#fff7e8; color:#9a6712; border:1px solid #edd3a0; }
.notice.ok { background:var(--success-bg); color:var(--success); border:1px solid #b8deca; }
.notice.error { background:var(--danger-bg); color:var(--danger); border:1px solid #f5c0c0; }
.actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.btn { flex:1; min-width:180px; padding:13px 16px; border:none; border-radius:12px; font-size:.95rem; font-weight:800; cursor:pointer; font-family:inherit; text-decoration:none; text-align:center; }
.btn-primary { background:linear-gradient(180deg, #df9447 0%, #c97728 100%); color:white; }
.btn-primary:hover { background:var(--accent-dk); }
.btn-secondary { background:white; border:1px solid rgba(107,63,30,.12); color:var(--brown); }
.btn-secondary:hover { background:rgba(255,255,255,.75); }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.spinner { width:40px; height:40px; border:4px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; margin:0 auto; }
@keyframes spin { to { transform:rotate(360deg); } }
#screen-loading { text-align:center; }
.site-footer { margin-top:22px; text-align:center; color:var(--muted); font-size:.82rem; }
.site-footer a { color:var(--brown); text-decoration:none; margin:0 8px; }
.site-footer a:hover { text-decoration:underline; }
.cookie-banner-wrap { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; display: none; }
.cookie-banner { max-width: 780px; margin: 0 auto; background: rgba(255,249,242,.98); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 34px rgba(107,63,30,.18); padding: 15px 16px; display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.cookie-banner strong { display: block; color: var(--brown); margin-bottom: 4px; }
.cookie-banner p { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.cookie-banner a { color: var(--accent-dk); }
.cookie-banner button { flex-shrink: 0; padding: 10px 14px; border: none; border-radius: 10px; background: var(--accent); color: white; font-weight: 700; cursor: pointer; font-family: inherit; }
.cookie-banner button:hover { background: var(--accent-dk); }
@media (max-width: 720px) {
  body { align-items:flex-start; padding:20px 14px 108px; }
  .box { padding:30px 20px; }
  .actions { flex-direction:column; }
  .btn { width:100%; min-width:0; min-height:46px; display:flex; align-items:center; justify-content:center; }
}
@media (max-width: 560px) {
  body { align-items:flex-start; padding:16px 10px 96px; }
  .box { padding:26px 16px; border-radius:18px; }
  .logo img { width:68px; height:68px; }
  h1 { font-size:1.25rem; }
  .sub { margin:10px auto 20px; font-size:.9rem; }
  .panel,
  .notice { padding:14px; border-radius:14px; }
  .actions { flex-direction:column; }
  .btn { width:100%; min-width:0; min-height:46px; display:flex; align-items:center; justify-content:center; }
  .site-footer a { display:inline-block; margin:6px 8px; }
  .app-version-badge { left:10px; bottom:8px; font-size:.66rem; }
  .cookie-banner { flex-direction: column; }
  .cookie-banner button { width: 100%; }
}