:root{--ink: #0f2a2e;--ink-soft: #2a4a4f;--mist: #e8f2f0;--paper: #f4faf8;--foam: #ffffff;--teal: #0d7a6f;--teal-deep: #085a52;--accent: #c45c26;--accent-soft: #f3d5c4;--line: rgba(15, 42, 46, .12);--ok: #1f7a4c;--warn: #b86a12;--danger: #b42318;--shadow: 0 18px 50px rgba(15, 42, 46, .12);--radius: 18px;--font-display: "Fraunces", Georgia, serif;--font-body: "Sora", sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;color:var(--ink);font-family:var(--font-body);background:radial-gradient(1200px 600px at 10% -10%,rgba(13,122,111,.18),transparent 55%),radial-gradient(900px 500px at 100% 0%,rgba(196,92,38,.12),transparent 50%),linear-gradient(180deg,#dceeea 0%,var(--paper) 42%,#eef6f4 100%);background-attachment:fixed}a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}.app-shell{width:min(1120px,calc(100% - 2rem));margin:0 auto;padding:1.25rem 0 3rem}.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.75rem;animation:rise .7s ease both}.brand{display:flex;align-items:baseline;gap:.55rem}.brand-mark{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.4rem);font-weight:700;letter-spacing:-.03em;color:var(--teal-deep)}.brand-mark span{color:var(--accent)}.brand-sub{color:var(--ink-soft);font-size:.85rem;opacity:.85}.nav-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}.btn{border:1px solid transparent;border-radius:999px;padding:.65rem 1.15rem;background:var(--teal);color:#fff;font-weight:600;transition:transform .18s ease,background .18s ease,box-shadow .18s ease}.btn:hover{background:var(--teal-deep);transform:translateY(-1px)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}.btn-ghost:hover{background:#ffffff8c}.btn-accent{background:var(--accent)}.btn-accent:hover{background:#a84b1c}.hero{display:grid;gap:1.25rem;margin-bottom:2rem;animation:rise .8s ease .05s both}.hero h1{margin:0;font-family:var(--font-display);font-size:clamp(2rem,5vw,3.4rem);line-height:1.08;letter-spacing:-.03em;max-width:14ch}.hero p{margin:0;max-width:42ch;color:var(--ink-soft);font-size:1.05rem;line-height:1.55}.panel{background:#ffffffb8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.7);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem}.grid-2{display:grid;gap:1.25rem}@media(min-width:900px){.grid-2{grid-template-columns:1.15fr .85fr}}.camera-wrap{position:relative;border-radius:16px;overflow:hidden;background:#0a1c1f;aspect-ratio:3 / 4;max-height:70vh}.camera-wrap video,.camera-wrap canvas,.camera-wrap img.preview{width:100%;height:100%;object-fit:cover;display:block}.zoom-control{display:grid;gap:.35rem;margin-top:.75rem;padding:.7rem .85rem;border:1px solid var(--line);border-radius:14px;background:#ffffff9e}.zoom-control-head,.zoom-control-foot{display:flex;align-items:center;justify-content:space-between;gap:.6rem}.zoom-control-head{font-size:.85rem;font-weight:700}.zoom-control input[type=range]{width:100%;accent-color:var(--teal)}.zoom-control-foot{color:var(--ink-soft);font-size:.75rem}.zoom-reset{padding:.25rem .55rem;font-size:.75rem}.camera-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;display:grid;place-items:center}.roi-frame{width:min(42%,180px);aspect-ratio:1;border:2.5px solid rgba(255,255,255,.92);border-radius:14px;box-shadow:0 0 0 9999px #081e2273,inset 0 0 0 1px #0d7a6f59;position:relative;animation:pulse-frame 2.4s ease-in-out infinite}.roi-frame:before,.roi-frame:after{content:"";position:absolute;width:18%;height:18%;border-color:#7fe0d2;border-style:solid}.roi-frame:before{top:-2px;left:-2px;border-width:3px 0 0 3px;border-radius:10px 0 0}.roi-frame:after{right:-2px;bottom:-2px;border-width:0 3px 3px 0;border-radius:0 0 10px}.roi-hint{position:absolute;bottom:1rem;left:50%;transform:translate(-50%);color:#fff;font-size:.82rem;background:#081e228c;padding:.45rem .8rem;border-radius:999px;white-space:nowrap}.swatch-row{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.75rem}.swatch{width:28px;height:28px;border-radius:8px;border:1px solid rgba(0,0,0,.08);position:relative}.swatch small{position:absolute;bottom:-1.1rem;left:50%;transform:translate(-50%);font-size:.62rem;color:var(--ink-soft);white-space:nowrap}.palette-editor{margin:1.1rem 0 1.3rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.palette-editor summary{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.85rem 0;cursor:pointer;font-weight:700}.palette-editor-content{padding-bottom:.9rem}.palette-editor-content>.meta{margin:0 0 .75rem}.palette-editor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:.5rem;margin-bottom:.75rem}.palette-editor-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.3rem .5rem;padding:.55rem .65rem;border:1px solid var(--line);border-radius:12px;background:#ffffff8f}.palette-editor-item>span{font-size:.8rem;font-weight:700}.palette-editor-item>small{grid-column:1 / -1;color:var(--ink-soft);font-size:.68rem}.palette-color-input{width:38px;height:32px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer}.palette-editor-actions{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem}.palette-save-error{color:var(--danger);font-size:.85rem}.palette-reset{padding:.45rem .8rem;font-size:.8rem}.result-ph{font-family:var(--font-display);font-size:clamp(3rem,8vw,4.5rem);line-height:1;margin:.2rem 0;letter-spacing:-.04em}.meta{color:var(--ink-soft);font-size:.92rem;line-height:1.5}.auth-page{min-height:70vh;display:grid;place-items:center}.auth-card{width:min(420px,100%);padding:1.75rem;animation:rise .65s ease both}.auth-card h1{font-family:var(--font-display);margin:0 0 .35rem;font-size:2rem}.field{display:grid;gap:.35rem;margin:.9rem 0}.field label{font-size:.85rem;font-weight:600}.field input{border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem;background:#ffffffe6}.field input:focus{outline:2px solid rgba(13,122,111,.35);border-color:var(--teal)}.error{color:var(--danger);font-size:.88rem;margin:.5rem 0}.history-list{display:grid;gap:.75rem}.history-item{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:.85rem 1rem;border-radius:14px;background:#ffffffa6;border:1px solid var(--line);animation:rise .5s ease both}.color-dot{width:42px;height:42px;border-radius:12px;border:1px solid rgba(0,0,0,.08)}.muted{color:var(--ink-soft);font-size:.85rem}.toolbar{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}.live-swatch{display:flex;align-items:center;gap:.75rem;margin-top:.85rem}.live-swatch .big{width:54px;height:54px;border-radius:14px;border:1px solid var(--line)}.section-title{font-family:var(--font-display);font-size:1.45rem;margin:0 0 .75rem}.confidence-bar{height:8px;border-radius:999px;background:#0f2a2e14;overflow:hidden;margin:.5rem 0 .85rem}.confidence-bar>span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--teal));border-radius:inherit;transition:width .45s ease}.notes{margin:0;padding-left:1.1rem;color:var(--ink-soft);font-size:.88rem}.tabs{display:flex;gap:.4rem;margin-bottom:1rem}.tab{border:0;background:transparent;padding:.45rem .8rem;border-radius:999px;color:var(--ink-soft);font-weight:600}.tab.active{background:#0d7a6f1f;color:var(--teal-deep)}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-frame{0%,to{box-shadow:0 0 0 9999px #081e2273,inset 0 0 0 1px #0d7a6f59}50%{box-shadow:0 0 0 9999px #081e2285,inset 0 0 0 1px #7fe0d2b3}}.footer-note{margin-top:2rem;color:var(--ink-soft);font-size:.82rem;text-align:center}