@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');
:root { color-scheme: light; --ink: #183029; --muted: #6d7c75; --leaf: #2f7556; --lime: #d8e857; --paper: #f4f3ed; --line: #d7ddd5; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: radial-gradient(circle at 80% 0%, #e6edc2 0, transparent 32%), var(--paper); font-family: Manrope, sans-serif; }
.shell { width: min(960px, calc(100% - 40px)); margin: 0 auto; padding: 70px 0 30px; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 44px; }
.eyebrow, footer { color: var(--leaf); font: 500 11px 'DM Mono', monospace; letter-spacing: 0; }
h1 { margin: 10px 0 0; font-size: clamp(48px, 8vw, 90px); line-height: .92; letter-spacing: 0; }
h1 span { color: var(--leaf); }.intro { max-width: 235px; margin: 0 0 6px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.workspace { position: relative; display: grid; gap: 16px; padding: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.64); box-shadow: 0 20px 60px rgba(31, 63, 47, .08); }
.dropzone { display: flex; min-height: 250px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px dashed #9bb2a2; background: rgba(245,248,235,.7); cursor: pointer; transition: border-color .2s, background .2s; }
.dropzone:hover, .dropzone.dragging { border-color: var(--leaf); background: #edf3d8; }.dropzone input { display: none; }
.upload-mark { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: var(--lime); font-size: 28px; }
.dropzone strong { font-size: 17px; }.dropzone span:last-child { color: var(--muted); font-size: 13px; }
.preview-panel { position: relative; max-height: 410px; overflow: hidden; background: #e7eadf; text-align: center; }.preview-panel img { display: block; width: 100%; max-height: 410px; object-fit: contain; }.clear-button { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--ink); background: white; font-size: 22px; cursor: pointer; }
.classify-button { display: flex; min-height: 54px; align-items: center; justify-content: space-between; padding: 0 20px; border: 0; color: white; background: var(--leaf); font: 700 15px Manrope, sans-serif; cursor: pointer; }.classify-button:disabled { cursor: not-allowed; opacity: .4; }.classify-button:not(:disabled):hover { background: #225d43; }
.status { min-height: 18px; margin: 0; color: var(--muted); font-size: 13px; }.status.error { color: #ae4b3e; }.result { border-top: 1px solid var(--line); padding-top: 18px; }.result-heading { display: flex; justify-content: space-between; margin-bottom: 13px; font: 500 11px 'DM Mono', monospace; text-transform: uppercase; }.result-heading span:last-child { color: var(--leaf); }
.prediction { display: grid; grid-template-columns: 155px 1fr 55px; align-items: center; gap: 14px; margin: 10px 0; font-size: 13px; }.bar { height: 8px; overflow: hidden; background: #e0e5dc; }.bar i { display: block; height: 100%; background: var(--leaf); transform-origin: left; }.score { color: var(--leaf); font: 500 12px 'DM Mono', monospace; text-align: right; }
footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 20px; font-size: 10px; line-height: 1.6; }
@media (max-width: 620px) { .shell { width: min(100% - 24px, 960px); padding-top: 38px; } .hero { display: block; margin-bottom: 28px; } .intro { margin-top: 22px; }.workspace { padding: 12px; }.prediction { grid-template-columns: 1fr 50px; gap: 8px; }.prediction .bar { grid-column: 1 / -1; grid-row: 2; } footer { display: block; } footer span { display: block; margin-top: 6px; } }