:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; color: #213229; background: #f5f6f0; }
    * { box-sizing: border-box; }
    body { margin: 0; min-height: 100vh; }
    button, input, textarea { font: inherit; }
    button { cursor: pointer; }
    .auth { display: grid; min-height: 100vh; grid-template-columns: minmax(300px, 1fr) minmax(340px, 1fr); }
    .auth-aside { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 5vw, 70px); background: #173b2c; color: #f3f7ef; }
    .brand { display: flex; align-items: center; gap: 11px; font-weight: 750; letter-spacing: -.035em; font-size: 21px; }
    .mark { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 13px; background: #a9d5b4; color: #173b2c; font-size: 24px; }
    .auth-aside h1 { font-size: clamp(39px, 5vw, 70px); line-height: 1.06; letter-spacing: -.065em; max-width: 680px; margin: 40px 0 20px; }
    .auth-aside p { max-width: 500px; line-height: 1.65; color: #c8decf; }
    .auth-main { display: grid; place-items: center; padding: 35px 24px; }
    .auth-card { width: min(100%, 430px); }
    .eyebrow { color: #3b7655; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 11px; }
    h2 { font-size: clamp(27px, 3vw, 38px); line-height: 1.13; letter-spacing: -.045em; margin: 0 0 12px; }
    h3 { font-size: 20px; letter-spacing: -.03em; margin: 0 0 10px; }
    p { line-height: 1.55; }
    .subtle { color: #66756b; }
    .field { display: block; margin: 19px 0 0; font-size: 13px; font-weight: 700; }
    .field input, .field textarea { display: block; width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid #c9d5c9; border-radius: 11px; background: #fff; color: #203128; outline-color: #3e7d5b; }
    .field input[type="file"] { padding: 11px; background: #f8faf5; }
    textarea { min-height: 115px; resize: vertical; }
    .button { min-height: 43px; border: 1px solid #cdd8cc; border-radius: 10px; padding: 9px 15px; background: #fff; color: #284533; font-weight: 700; }
    .button:hover { background: #f0f6ef; }
    .button.primary { border-color: #285f41; background: #285f41; color: white; }
    .button.primary:hover { background: #1d4d33; }
    .button.danger { color: #a83f34; }
    .button.small { min-height: 34px; padding: 6px 10px; font-size: 12px; }
    .button.full { width: 100%; margin-top: 24px; }
    .hint { font-size: 12px; color: #718074; line-height: 1.5; }
    .error { min-height: 20px; color: #ad3d31; font-size: 13px; margin-top: 12px; }
    .demo-note { padding: 13px 15px; border: 1px solid #dce6d7; border-radius: 11px; background: #eef4e9; color: #55705a; font-size: 12px; line-height: 1.5; margin-top: 26px; }
    .app { min-height: 100vh; }
    .top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px clamp(20px, 4vw, 58px); background: #fff; border-bottom: 1px solid #dce5d9; }
    .top-right { display: flex; align-items: center; gap: 15px; font-size: 13px; color: #607166; }
    .top-right strong { color: #284936; }
    .layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: calc(100vh - 70px); }
    .sidebar { background: #fcfdf9; border-right: 1px solid #dce5d9; padding: 24px 12px; }
    .nav-label { margin: 0 12px 12px; color: #829084; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .nav { display: grid; gap: 4px; }
    .nav button { width: 100%; padding: 12px 13px; border: 0; border-radius: 10px; background: transparent; color: #627267; text-align: left; }
    .nav button[aria-current="page"] { background: #e6f1e6; color: #25563a; font-weight: 750; }
    .main { width: min(100%, 1150px); padding: clamp(24px, 4vw, 54px); margin: 0 auto; }
    .lead { max-width: 690px; color: #69796c; margin: 0 0 28px; }
    .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .card { border: 1px solid #dce5da; border-radius: 17px; padding: 23px; background: #fff; box-shadow: 0 7px 28px #24442d08; }
    .card + .card { margin-top: 16px; }
    .grid .card + .card { margin-top: 0; }
    .row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
    .row.actions { justify-content: flex-end; margin-top: 14px; }
    .item { padding: 15px 0; border-top: 1px solid #e4ebe2; }
    .item:first-child { border-top: 0; }
    .item p { margin: 6px 0 0; white-space: pre-wrap; }
    .item small { color: #748276; }
    .pill { display: inline-block; padding: 5px 9px; border-radius: 999px; background: #e7f1e7; color: #2d6744; font-size: 11px; font-weight: 750; }
    .pill.paused { background: #f3e9df; color: #8b5a28; }
    .empty { color: #78867b; font-size: 14px; }
    .entry { max-width: 760px; }
    .answer { margin-top: 24px; padding: 20px 23px; border-left: 4px solid #65a578; border-radius: 0 12px 12px 0; background: #eef5eb; white-space: pre-wrap; line-height: 1.6; }
    .muted-box { padding: 18px 20px; border-radius: 14px; background: #e8f1e6; color: #456149; }
    .muted-box p { margin-bottom: 0; }
    .info-status { margin: 12px 0 0; color: #476b50; font-size: 13px; }
    .info-status[role="alert"] { color: #ad3d31; }
    .user-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 15px 0; border-top: 1px solid #e4ebe2; }
    .user-row:first-child { border-top: 0; }
    .user-actions { display: flex; flex-wrap: wrap; gap: 7px; }
    .preview { max-width: 800px; border: 1px solid #d6e1d6; border-radius: 20px; overflow: hidden; background: #f7f8f2; }
    .preview-head { padding: 15px 20px; border-bottom: 1px solid #dce5d9; background: #fff; font-weight: 750; }
    .preview-body { padding: 24px; }
    @media (max-width: 800px) { .auth { grid-template-columns: 1fr; } .auth-aside { min-height: 220px; padding: 25px; } .auth-aside h1 { font-size: 38px; margin: 25px 0 0; } .auth-aside p { display: none; } .layout { grid-template-columns: 1fr; } .sidebar { border-right: 0; border-bottom: 1px solid #dce5d9; padding: 10px 15px; } .nav-label { display: none; } .nav { display: flex; flex-wrap: wrap; } .nav button { width: auto; } .grid { grid-template-columns: 1fr; } .top { padding: 13px 18px; } }
    /* Refined visual system for the local preview */
    :root { --pine:#173d32; --forest:#245e47; --mint:#dcebdc; --paper:#fffefa; --cream:#f5f3ec; --ink:#193329; --muted:#66776c; --line:#d9e2d6; --gold:#c99a57; color:var(--ink); background:var(--cream); font-family:"Segoe UI",ui-sans-serif,system-ui,sans-serif; }
    body { background:radial-gradient(circle at 88% 2%,#f1e6cc 0,transparent 29%),var(--cream); }
    h2 { font-family:Georgia,"Times New Roman",serif; font-weight:500; font-size:clamp(35px,3vw,51px); line-height:1.09; letter-spacing:-.045em; }
    h3 { font-family:Georgia,"Times New Roman",serif; font-weight:500; font-size:25px; letter-spacing:-.035em; }
    .eyebrow { color:#357257; font-size:11px; letter-spacing:.19em; margin-bottom:15px; }
    .lead { max-width:790px; color:var(--muted); font-size:16px; line-height:1.7; margin-bottom:33px; }
    .brand { gap:12px; font-size:20px; letter-spacing:-.04em; line-height:1.05; color:var(--ink); }
    .brand small { display:block; margin-top:6px; color:#78867a; font-size:10px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; }
    .mark { width:43px; height:43px; border-radius:14px; background:var(--pine); color:#f0d6a3; font-size:26px; box-shadow:0 6px 14px #153b2d25; }
    .auth-aside { position:relative; overflow:hidden; background:linear-gradient(145deg,#14372c,#285f48); }
    .auth-aside::before { content:""; position:absolute; width:min(60vw,620px); aspect-ratio:1; right:-17%; top:20%; border-radius:50%; border:1px solid #d8c18f55; box-shadow:0 0 0 65px #d8c18f13,0 0 0 130px #d8c18f0b; pointer-events:none; }
    .auth-aside > * { position:relative; z-index:1; }
    .auth-aside .brand { color:#f7f8f1; }
    .auth-aside .mark { background:#e8cf9b; color:#173d32; }
    .auth-aside h1 { font-family:Georgia,"Times New Roman",serif; font-weight:500; letter-spacing:-.055em; }
    .auth-main { background:#f8f7f1; }
    .auth-card { padding:clamp(25px,4vw,48px); width:min(100%,530px); background:var(--paper); border:1px solid var(--line); border-radius:25px; box-shadow:0 25px 65px #173d3214; }
    .auth-card h2 { font-size:42px; }
    .auth-card .subtle { margin:0 0 27px; }
    .field { color:#30473a; font-size:13px; letter-spacing:.01em; }
    .field input,.field textarea { border:1px solid #cdd8cb; border-radius:13px; padding:14px 16px; background:#fffefa; color:var(--ink); line-height:1.5; transition:border-color .2s,box-shadow .2s; }
    .field input:focus,.field textarea:focus { border-color:#397c59; outline:none; box-shadow:0 0 0 4px #64a77825; }
    .field textarea::placeholder,.field input::placeholder { color:#8c978d; font-weight:400; }
    .button { border-radius:11px; transition:transform .18s,background .18s,box-shadow .18s; }
    .button:hover { transform:translateY(-1px); }
    .button.primary { border-color:var(--pine); background:var(--pine); box-shadow:0 7px 14px #173d3229; }
    .button.primary:hover { background:#245b45; box-shadow:0 9px 17px #173d3235; }
    .button:focus-visible,.nav button:focus-visible { outline:3px solid #d0a35b; outline-offset:3px; }
    .top { min-height:77px; padding:14px clamp(20px,3vw,52px); border-bottom-color:#dfdfd2; background:#fffefaed; backdrop-filter:blur(16px); }
    .top-right { gap:18px; }
    .top-right strong { color:var(--ink); }
    .top-badge,.view-chip { display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:999px; background:#e7f1e5; color:#286448; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
    .layout { grid-template-columns:252px minmax(0,1fr); min-height:calc(100vh - 77px); }
    .sidebar { position:relative; display:flex; flex-direction:column; min-height:calc(100vh - 77px); padding:30px 14px 25px; border:0; background:linear-gradient(165deg,#163a2f,#214f3d); }
    .nav-label { color:#a4c3ad; margin:0 15px 14px; }
    .nav { gap:6px; }
    .nav button { display:flex; align-items:center; gap:11px; min-height:47px; padding:12px 15px; border:1px solid transparent; border-radius:12px; color:#d4e3d4; font-weight:600; }
    .nav-icon { display:grid; place-items:center; width:20px; height:20px; flex:none; }
    .nav-icon svg { display:block; width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
    .nav button:hover { background:#ffffff14; color:white; }
    .nav button[aria-current="page"] { background:#f3f5eb; color:#1e4f38; box-shadow:0 8px 16px #0e2b2330; }
    .nav button[aria-current="page"]::after { content:"↗"; margin-left:auto; font-weight:700; }
    .sidebar-footer { margin:auto 12px 0; padding:24px 3px 4px; border-top:1px solid #ffffff30; color:#c6dccb; font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:18px; }
    .sidebar-footer span { color:#d7b677; font-size:28px; }
    .sidebar-footer p { margin:8px 0 0; line-height:1.4; }
    .main { width:min(100%,1550px); padding:clamp(28px,4vw,62px); }
    .page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:28px; }
    .page-heading .lead { margin-bottom:0; }
    .grid { gap:24px; }
    .card { border-color:var(--line); border-radius:21px; padding:clamp(23px,2.4vw,33px); background:var(--paper); box-shadow:0 12px 35px #18362a0b; }
    .muted-box { border:1px solid #d4e1d2; background:#eaf2e8; color:#3e654c; }
    .preview { width:100%; max-width:none; border:1px solid #cfdbcf; border-radius:25px; background:var(--paper); box-shadow:0 28px 70px #173a2b17; }
    .preview-head { display:flex; align-items:center; justify-content:space-between; gap:15px; min-height:68px; padding:15px clamp(25px,3vw,42px); border-bottom:1px solid #e1e6db; background:#fffefa; }
    .preview-brand { display:flex; align-items:center; gap:11px; color:#234a36; font-size:15px; font-weight:800; }
    .preview-mark { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#e7f0e2; color:#316c4c; }
    .preview-divider { height:20px; width:1px; margin:0 4px; background:#d5dfd3; }
    .preview-section { color:#748778; font-weight:650; }
    .preview-meta { color:#89988a; font-size:12px; font-weight:600; }
    .preview-body { padding:0; }
    .experience { display:grid; grid-template-columns:minmax(270px,.87fr) minmax(410px,1.13fr); align-items:center; gap:clamp(32px,4vw,80px); min-height:620px; padding:clamp(34px,4.4vw,76px); background:radial-gradient(circle at 8% 98%,#e2ece0 0,transparent 40%),linear-gradient(120deg,#f5f7ef,#f9f8f2 56%,#f0f2e9); }
    .experience-story { align-self:stretch; display:flex; flex-direction:column; justify-content:center; min-width:0; padding:10px 0; }
    .experience-story .eyebrow { margin-top:20px; }
    .experience-story h2 { max-width:600px; margin:0 0 24px; font-size:clamp(43px,3.7vw,64px); }
    .experience-lead { max-width:470px; margin:0; color:#5c7163; font-size:17px; line-height:1.7; }
    .sun-art { position:relative; display:grid; place-items:center; width:87px; height:87px; margin:14px 0 28px 18px; border-radius:50%; background:radial-gradient(circle at 33% 28%,#ffe5aa,#cf9f5f 75%); box-shadow:0 0 0 17px #edddbc99,0 0 0 35px #edddbc4d; color:#805921; font-size:32px; }
    .sun-art::after { content:""; position:absolute; inset:-47px; border:1px dashed #c6a16972; border-radius:50%; }
    .story-footer { display:flex; align-items:center; gap:17px; margin-top:auto; padding-top:46px; color:#4b6854; }
    .story-footer p { margin:0; font-family:Georgia,"Times New Roman",serif; font-style:italic; font-size:19px; line-height:1.4; }
    .story-line { width:2px; height:45px; background:#c69e63; }
    .entry { width:100%; max-width:none; align-self:center; border:1px solid #e0e4da; border-radius:24px; padding:clamp(26px,3vw,43px); box-shadow:0 22px 55px #173d3214; }
    .entry-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:38px; }
    .step-label { color:#648673; font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
    .privacy-pill { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:8px 11px; background:#edf4eb; color:#427253; font-size:11px; font-weight:750; }
    .privacy-pill span { color:#62a676; font-size:7px; }
    .entry h3 { margin:0 0 10px; font-size:clamp(28px,2.5vw,37px); }
    .entry-lead { margin:0 0 21px; max-width:460px; color:var(--muted); font-size:14px; line-height:1.6; }
    .entry .field { margin:0; }
    .entry textarea { min-height:240px; border-radius:15px; padding:18px 20px; background:#fcfbf7; font-size:16px; font-weight:400; line-height:1.6; }
    .entry-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:20px; }
    .entry-bottom .hint { font-size:12px; }
    .entry-bottom .button { min-width:145px; min-height:50px; font-size:14px; }
    .entry-bottom .button span { margin-left:11px; font-size:18px; }
    .answer { display:flex; gap:17px; margin-top:30px; border:1px solid #d6e7d1; border-left:4px solid #4b8d62; border-radius:15px; padding:22px; background:#eff7ec; color:#244b34; white-space:normal; }
    .answer-icon { color:#bd9158; font-size:27px; line-height:1; }
    .answer strong { display:block; margin:2px 0 10px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; }
    .answer p { margin:0; white-space:pre-wrap; line-height:1.75; }
    .otmar-page { width:100%; }
    .otmar-page .experience { border:1px solid #d9e3d8; border-radius:27px; box-shadow:0 25px 65px #173a2b0c; }
    .app[data-role="unteradmin"] .layout { grid-template-columns:1fr; }
    .app[data-role="unteradmin"] .sidebar { display:none; }
    .app[data-role="unteradmin"] .main { width:min(100%,1550px); }
    .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
    @media (max-width:1150px) { .experience { grid-template-columns:1fr; gap:24px; } .experience-story { padding:10px 0 0; } .experience-story h2 { max-width:700px; } .sun-art { width:64px; height:64px; margin:18px 0 24px 16px; } .story-footer { margin-top:24px; padding-top:10px; } .entry { max-width:800px; } }
    @media (max-width:800px) { .layout { grid-template-columns:1fr; } .sidebar { display:block; min-height:0; padding:9px 14px; } .nav { display:flex; gap:4px; } .nav button { width:auto; min-height:40px; padding:9px 12px; } .nav-label,.sidebar-footer { display:none; } .main { padding:25px 18px 40px; } .page-heading { align-items:flex-start; } .view-chip,.preview-meta { display:none; } .preview-head { min-height:56px; padding:12px 17px; } .experience { min-height:0; padding:24px 19px 28px; } .experience-story h2 { font-size:42px; } .entry { padding:24px 20px; } .auth-aside { min-height:250px; } .auth-card { padding:26px 22px; } }
    @media (max-width:520px) { .top { gap:8px; } .brand { font-size:16px; } .brand small { display:none; } .mark { width:36px; height:36px; font-size:21px; } .top-right { gap:8px; } .top-right > span:not(.top-badge) { display:none; } .top-badge { padding:7px 9px; font-size:10px; } .preview-section,.preview-divider { display:none; } .experience-story h2 { font-size:37px; } .experience-lead { font-size:15px; } .sun-art { width:55px; height:55px; margin:20px 0 20px 17px; box-shadow:0 0 0 12px #edddbc99,0 0 0 25px #edddbc4d; } .sun-art::after { inset:-34px; } .entry-top { margin-bottom:23px; } .entry-bottom { align-items:stretch; } .entry-bottom .button { width:100%; } }
  .nav a { display:flex; align-items:center; gap:11px; min-height:47px; padding:12px 15px; border:1px solid transparent; border-radius:12px; color:#d4e3d4; font-weight:600; text-decoration:none; }
  .nav a:hover { background:#ffffff14; color:white; }
  .nav a[aria-current="page"] { background:#f3f5eb; color:#1e4f38; box-shadow:0 8px 16px #0e2b2330; }
  .nav a[aria-current="page"]::after { content:"↗"; margin-left:auto; font-weight:700; }
  .nav a:focus-visible { outline:3px solid #d0a35b; outline-offset:3px; }
  .top-right form,.user-actions form { margin:0; }
  .info-text { min-height:280px; }
  .response-note { margin-top:20px; }
  .reset-form { flex-basis:100%; display:flex; align-items:end; gap:10px; }
  .reset-form .field { flex:1; margin:0; }
  .reset-form .button { flex:none; }
  .notice { margin:0 0 22px; padding:13px 16px; border:1px solid #c9ddca; border-radius:12px; background:#eaf4e9; color:#28573a; font-size:14px; }
  .notice-error { border-color:#e6c4bf; background:#fff0ec; color:#a23f35; }
  .app[data-role="unteradmin"] .layout { display:block; }
  @media (max-width:800px) { .nav a { width:auto; min-height:40px; padding:9px 12px; } }
  @media (max-width:520px) { .reset-form { display:block; } .reset-form .button { margin-top:10px; } }