:root { --ink:#18221d; --cream:#f5f0e4; --paper:#fffdf8; --orange:#f16f3b; --orange-dark:#d85428; --green:#296445; --muted:#68716c; --line:#ded9cd; --yellow:#f2c94c; --shadow:0 18px 50px rgba(24,34,29,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink); background:var(--cream); }
button,input { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.site-header { height:84px; padding:0 clamp(24px,6vw,96px); display:flex; align-items:center; justify-content:space-between; background:rgba(245,240,228,.94); backdrop-filter:blur(12px); position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(24,34,29,.08); }
.brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:11px; font-weight:900; letter-spacing:.04em; }
.brand small { display:block; font-size:8px; letter-spacing:.22em; margin-top:2px; color:var(--muted); }
.brand-mark { display:grid; place-items:center; width:42px; height:42px; color:#fff; background:var(--orange); border-radius:50% 50% 46% 54%/55% 45% 55% 45%; transform:rotate(-5deg); font-size:20px; }
nav { display:flex; align-items:center; gap:10px; }
.user-chip { display:flex; align-items:center; gap:10px; margin-right:8px; font-weight:600; }
.user-avatar { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#d6e6da; color:var(--green); }
.role-badge { padding:3px 8px; background:#f8d9cb; color:#aa3e18; border-radius:99px; font-size:11px; }
.btn { border:0; border-radius:999px; padding:11px 20px; font-weight:700; transition:transform .18s,background .18s,box-shadow .18s; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:white; background:var(--orange); box-shadow:0 8px 20px rgba(241,111,59,.22); }
.btn-primary:hover { background:var(--orange-dark); }
.btn-ghost { background:transparent; color:var(--ink); border:1px solid var(--line); }
.btn-dark { background:var(--ink); color:white; }
.btn-danger { color:white; background:#c84032; }
.btn-large { padding:15px 25px; }
.btn-large span { margin-left:15px; }
.btn-full { width:100%; border-radius:10px; padding:14px; }
.hero { min-height:580px; padding:75px clamp(24px,8vw,130px); display:grid; grid-template-columns:1.05fr .95fr; align-items:center; overflow:hidden; position:relative; }
.hero::before { content:''; position:absolute; width:350px; height:350px; border-radius:50%; background:#e7dfcd; filter:blur(2px); left:-180px; top:80px; }
.hero-copy { position:relative; z-index:2; max-width:650px; }
.eyebrow { font-size:12px; color:var(--orange-dark); text-transform:uppercase; letter-spacing:.2em; font-weight:900; }
h1 { font-size:clamp(48px,6vw,82px); line-height:1.12; letter-spacing:-.055em; margin:18px 0 25px; font-weight:900; }
h1 em { font-style:normal; color:var(--orange); }
.hero-copy p { color:var(--muted); max-width:520px; font-size:17px; line-height:1.9; margin-bottom:32px; }
.hero-art { min-height:430px; position:relative; display:grid; place-items:center; }
.plate { width:min(30vw,340px); aspect-ratio:1; border-radius:50%; background:#fffdf7; box-shadow:0 30px 70px rgba(45,55,48,.17), inset 0 0 0 25px #ece5d7, inset 0 0 0 29px #fff; display:grid; place-items:center; transform:rotate(8deg); }
.plate::after { content:''; position:absolute; width:48%; height:48%; border-radius:45% 55% 48% 52%; background:var(--orange); box-shadow:inset -15px -12px 0 rgba(131,43,12,.1); }
.plate span { z-index:1; color:white; font-weight:900; font-size:70px; transform:rotate(-8deg); }
.orbit { position:absolute; background:var(--ink); color:white; padding:13px 20px; border-radius:99px; font-weight:900; box-shadow:var(--shadow); }
.orbit-one { top:12%; right:4%; transform:rotate(8deg); }
.orbit-two { bottom:10%; left:4%; background:#fff; color:var(--ink); transform:rotate(-8deg); }
.spark { position:absolute; color:var(--yellow); font-size:45px; }
.spark-one { left:10%; top:15%; }.spark-two { right:2%; bottom:18%; font-size:28px; }
.content { background:var(--paper); border-radius:42px 42px 0 0; padding:75px clamp(24px,6vw,96px) 100px; min-height:500px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:35px; }
.section-heading h2 { font-size:clamp(32px,4vw,48px); margin:9px 0 0; letter-spacing:-.04em; }
.restaurant-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; }
.restaurant-card { border:1px solid #e5e0d7; border-radius:20px; overflow:hidden; background:#fff; transition:transform .2s,box-shadow .2s; }
.restaurant-card:hover { transform:translateY(-5px); box-shadow:var(--shadow); }
.card-photo { height:220px; width:100%; object-fit:cover; background:#ddd; display:block; }
.card-content { padding:22px; }
.card-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.card-top h3 { font-size:22px; margin:0; }
.admin-actions { display:flex; gap:5px; }
.icon-button { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:white; color:var(--muted); }
.icon-button.delete:hover { color:#b32d22; border-color:#dc9c95; }
.rating-prompt { color:var(--muted); font-size:13px; margin:18px 0 10px; }
.rating-scale { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.rating-button { border:1px solid var(--line); background:#faf8f2; border-radius:8px; padding:8px 2px; color:var(--muted); font-size:11px; transition:.15s; }
.rating-button strong { display:block; font-size:15px; color:var(--ink); }
.rating-button:hover,.rating-button.selected { border-color:var(--orange); background:#fff0e9; color:var(--orange-dark); transform:translateY(-2px); }
.rating-button.selected strong { color:var(--orange-dark); }
.locked-stats { margin-top:17px; padding:14px; background:#f5f1e8; border-radius:10px; color:var(--muted); font-size:13px; text-align:center; }
.stats { margin-top:19px; border-top:1px solid #eee8dd; padding-top:17px; display:flex; align-items:center; gap:18px; }
.average { min-width:78px; }
.average strong { font-size:36px; line-height:1; color:var(--orange); }
.average span { font-size:12px; color:var(--muted); display:block; margin-top:5px; }
.distribution { flex:1; }
.bar-row { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted); margin:3px 0; }
.bar { height:5px; background:#ece8df; border-radius:9px; flex:1; overflow:hidden; }.bar i { display:block; height:100%; background:var(--orange); border-radius:9px; }
.admin-stats { color:var(--muted); font-size:13px; margin-top:16px; }
.empty-state { text-align:center; padding:70px 20px; color:var(--muted); }.empty-state div { font-size:55px; }.empty-state h3 { color:var(--ink); margin-bottom:5px; }
footer { background:var(--ink); color:#c9d0cc; padding:35px clamp(24px,6vw,96px); display:flex; align-items:center; justify-content:space-between; }.brand-footer { color:white; }.brand-footer .brand-mark { width:34px;height:34px;font-size:16px; } footer p { font-size:13px; }
.modal { width:min(92vw,470px); border:0; border-radius:22px; padding:36px; color:var(--ink); box-shadow:0 30px 90px rgba(0,0,0,.26); background:var(--paper); }
.modal::backdrop { background:rgba(16,24,19,.66); backdrop-filter:blur(4px); }
.modal-close { position:absolute; top:15px; right:17px; border:0; background:transparent; font-size:25px; color:var(--muted); }
.auth-tabs { display:flex; border-bottom:1px solid var(--line); margin:-10px 0 28px; }.auth-tab { flex:1; border:0; padding:13px; background:transparent; color:var(--muted); font-weight:700; border-bottom:2px solid transparent; }.auth-tab.active { color:var(--orange-dark); border-bottom-color:var(--orange); }
.form-stack { display:flex; flex-direction:column; gap:17px; }.form-stack h2 { margin:7px 0 0; font-size:27px; }.form-stack label { color:#424b46; font-size:13px; font-weight:600; }.form-stack input:not([type=file]) { width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:9px; background:white; margin-top:7px; outline:none; }.form-stack input:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(241,111,59,.12); }
.text-button { border:0; background:transparent; color:var(--green); font-size:12px; }.form-note { font-size:12px; color:var(--muted); line-height:1.7; margin:0; }.label-hint { color:var(--muted); font-weight:400; }
.file-drop { display:grid; place-items:center; border:1px dashed #b9b5ac; border-radius:10px; min-height:100px; margin-top:8px; background:#faf8f3; color:var(--muted); position:relative; text-align:center; padding:12px; }.file-drop input { position:absolute; inset:0; opacity:0; cursor:pointer; }
.confirm-modal { text-align:center; }.danger-icon { margin:0 auto; width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#f8d7d2;color:#b72f23;font-size:26px;font-weight:900; }.confirm-modal p { color:var(--muted); line-height:1.7; }.confirm-actions { display:flex; justify-content:center; gap:10px; margin-top:25px; }
.toast-region { position:fixed; right:24px; bottom:24px; z-index:100; display:flex; flex-direction:column; gap:10px; }.toast { max-width:360px; padding:14px 18px; border-radius:10px; background:var(--ink); color:white; box-shadow:var(--shadow); animation:toast-in .25s ease-out; font-size:14px; }.toast.error { background:#a9362c; }.toast a { color:#ffd2be; font-weight:700; }
@keyframes toast-in { from { opacity:0; transform:translateY(10px); } }
@media (max-width:900px) { .hero { grid-template-columns:1fr; padding-top:50px; }.hero-art { min-height:340px; }.plate { width:270px; }.restaurant-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px) { .site-header { height:70px; padding:0 16px; }.brand small { display:none; }.brand-mark { width:36px;height:36px; }.site-header .btn { padding:9px 13px; font-size:13px; }.user-chip span:not(.user-avatar):not(.role-badge) { display:none; }.hero { padding:45px 22px; }.hero-art { min-height:300px; }.plate { width:220px; }.plate span { font-size:55px; }.content { padding:55px 18px 70px; border-radius:28px 28px 0 0; }.restaurant-grid { grid-template-columns:1fr; }.section-heading { align-items:flex-start; flex-direction:column; }.modal { padding:32px 22px; }.rating-scale { gap:4px; }.rating-button { font-size:10px; } footer { flex-direction:column; gap:12px; } }