/* ============================================================
   COFFEE LEAF CARE — GREEN & WHITE EDITION
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap');

:root {
  --green: #16a34a;
  --green-dark: #15803d;
  --green-light: #bbf7d0;
  --black: #111827;
  --card: #f0fdf4;
  --border: #d1d5db;
  --txt: #111827;
  --tm: #6b7280;
  --smoke: #9ca3af;
  --white: #ffffff;
  --ylw: #f59e0b;
  --r: 0px;
  --t: .3s cubic-bezier(.25,.8,.25,1);
}
.page-enter { animation: pageFadeIn .3s ease both; }
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }

/* Zoom / Lightbox */
.zoom-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.95); z-index: 4000; display: flex; align-items: center; justify-content: center; animation: zoomBgIn .25s ease both; }
@keyframes zoomBgIn { from { opacity: 0 } to { opacity: 1 } }
.zoom-canvas { width: 100vw; height: 100vh; overflow: auto; display: flex; align-items: center; justify-content: center; }
.zoom-canvas img { max-width: 92vw; max-height: 92vh; object-fit: contain; animation: zoomImgIn .3s ease both; transition: none; flex-shrink: 0; }
.zoom-canvas.zoom-active img { cursor: grab; user-select: none; touch-action: none; }
.zoom-canvas.zoom-active img:active { cursor: grabbing; }
@keyframes zoomImgIn { from { opacity: 0; transform: scale(.9) } to { opacity: 1; transform: scale(1) } }
.zoom-close { position: absolute; top: 1rem; right: 1.5rem; width: 44px; height: 44px; background: none; border: 2px solid #d1d5db; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--t); font-size: 1.2rem; z-index: 10; border-radius: 50%; }
.zoom-close:hover { border-color: var(--green); color: var(--green); }

/* Image zoom cursor */
.c-zoomable { cursor: zoom-in; }
.c-zoomable:hover { opacity: .92; }

/* Photo Guidance */
.guidance-panel { margin-bottom: 1rem; }
.guidance-toggle { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 1px solid var(--border); color: var(--tm); padding: .5rem 1rem; font-size: .75rem; cursor: pointer; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; transition: var(--t); font-family: 'Noto Sans JP', sans-serif; width: 100%; max-width: 600px; margin: 0 auto; display: flex; justify-content: center; }
.guidance-toggle svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.guidance-toggle:hover { border-color: var(--green); color: var(--green); }
.guidance-content { background: var(--white); border: 1px solid var(--border); padding: 1rem 1.3rem; max-width: 600px; margin: .5rem auto 0; display: none; animation: pageFadeIn .25s ease both; }
.guidance-content.open { display: block; }
.guidance-content ul { list-style: none; display: grid; gap: .5rem; }
.guidance-content li { display: flex; align-items: flex-start; gap: .6rem; font-size: .82rem; color: var(--tm); line-height: 1.5; }
.guidance-content li svg { width: 14px; height: 14px; stroke: var(--green); stroke-width: 2; fill: none; flex-shrink: 0; margin-top: 2px; }
.guidance-content li strong { color: var(--black); }

/* Responsive adjustments */
@media(max-width:768px) { .compare-grid { grid-template-columns: 1fr; } }
@media(max-width:480px) { .res-retry { flex-direction: column; } .res-retry button { width: 100%; } }

/* Status dot */
.status-dot { width: 10px; height: 10px; margin-left: 1rem; background: var(--green); border-radius: 50%; transition: var(--t); }
.status-dot--offline { background: #ef4444 !important; }
@media(max-width:480px) { .status-dot { margin-left: auto; } }

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP','Segoe UI',system-ui,sans-serif;color:var(--txt);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* Headers */
h1,h2,h3,h4{font-family:'Anton','Noto Sans JP',Impact,sans-serif;text-transform:uppercase;letter-spacing:1px}

/* ====== NAVBAR ====== */
.navbar{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:transparent;z-index:500;transition:background .35s,box-shadow .35s,backdrop-filter .35s}
.navbar.navbar--solid{background:rgba(0,0,0,.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 1px 12px rgba(0,0,0,.25)}
.navbar-logo{display:flex;align-items:center;gap:.6rem;font-family:'Anton','Noto Sans JP',sans-serif;font-weight:900;font-size:1.2rem;color:#fff;text-decoration:none;letter-spacing:2px}
.navbar-logo svg{width:26px;height:26px;stroke:var(--green);stroke-width:2;fill:none}
.nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;list-style:none;gap:2rem;align-items:center}
.nav-links a{color:#fff;text-decoration:none;font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:2px;transition:var(--t);position:relative}
.nav-links a:hover{color:var(--green)}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--green);transition:var(--t)}
.nav-links a:hover::after{width:100%}
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:.3rem}
.nav-hamburger svg{width:26px;height:26px;stroke:#fff;stroke-width:2}
.mob-nav{display:none;position:fixed;top:64px;left:0;right:0;background:var(--black);border-bottom:none;z-index:500;flex-direction:column;padding:1rem 0}
.mob-nav.open{display:flex}
.mob-nav a{padding:.6rem 2rem;color:#fff;text-decoration:none;font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:2px;display:block;transition:var(--t)}
.mob-nav a:hover,.mob-nav a.mob-detect{color:var(--green)}

/* ====== TOAST ====== */
#toast-container{position:fixed;top:78px;right:1rem;z-index:3000;display:flex;flex-direction:column;gap:.5rem}
.toast{padding:.6rem 1.2rem;color:#fff;font-size:.8rem;font-weight:700;opacity:0;transform:translateX(120%);transition:all .35s var(--t);max-width:320px;text-transform:uppercase;letter-spacing:1px}
.toast.show{opacity:1;transform:translateX(0)}
.toast-error{background:#ef4444}
.toast-success{background:var(--green)}
.toast-warning{background:#d97706;color:#000}

/* ====== BUTTONS ====== */
.btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;background:var(--green);color:#fff;border:2px solid var(--green);font-weight:800;font-size:.9rem;cursor:pointer;transition:var(--t);font-family:'Noto Sans JP',sans-serif;text-transform:uppercase;letter-spacing:2px;position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--green-dark);transform:scaleX(0);transform-origin:right;transition:var(--t);z-index:0}
.btn-primary:hover::after{transform:scaleX(1);transform-origin:left}
.btn-primary:hover{color:#fff}
.btn-primary svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;position:relative;z-index:1}
.btn-primary span{position:relative;z-index:1}
.btn-primary:disabled{opacity:.3;pointer-events:none;border-color:var(--smoke)}

.btn-outline{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border:1px solid var(--border);color:var(--black);background:transparent;font-weight:600;font-size:.9rem;text-decoration:none;transition:var(--t);font-family:'Noto Sans JP',sans-serif;text-transform:uppercase;letter-spacing:1px}
.btn-outline:hover{border-color:var(--green);color:var(--green);background:var(--green-light)}

/* ====== HERO ====== */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:7rem 1.5rem 3rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 60% 40%,rgba(22,163,74,.06) 0%,transparent 70%);z-index:0}
.hero-inner{position:relative;z-index:1;max-width:800px}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--card);border:1px solid var(--green);padding:.35rem 1rem;font-size:.75rem;font-weight:800;color:var(--green);margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:2px}
.hero h1{font-size:clamp(3rem,8vw,6rem);font-weight:900;line-height:1;margin-bottom:.8rem;letter-spacing:2px;text-shadow:0 2px 20px rgba(0,0,0,.5);color:#fff}
.hero h1 span{color:#4ade80}
.hero p{color:#d1d5db;font-size:1rem;max-width:500px;margin:0 auto 2rem;line-height:1.8;letter-spacing:.5px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.hero--bg::before{display:none}
.hero--bg .hero-badge{background:rgba(0,0,0,.5);color:#fff;border-color:rgba(255,255,255,.3)}
.hero--bg .h-stat strong{color:#fff}
.hero--bg .h-stat span{color:#d1d5db}
.hero--bg .hero-stats{border-top-color:rgba(255,255,255,.2)}

/* Divider */
.section-divider{height:3px;background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:.5}
.hero-actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;position:relative;z-index:1}
.hero-stats{display:flex;gap:5rem;margin-top:4rem;padding-top:2rem;max-width:600px;position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.15)}
.h-stat{text-align:center;padding:0 1rem}
.h-stat strong{display:block;font-size:2.5rem;font-weight:900;color:#fff;font-family:'Anton',sans-serif;line-height:1.1}
.h-stat span{display:block;font-size:.75rem;color:#d1d5db;text-transform:uppercase;letter-spacing:2px;margin-top:.3rem}

/* Model Metrics Section */
.metrics-section{text-align:center;padding:5rem 1.5rem 4rem;background:var(--card);border-top:1px solid var(--border)}
.metrics-grid{display:flex;gap:3rem;justify-content:center;flex-wrap:wrap;max-width:600px;margin:0 auto}
.metric-card{text-align:center;padding:1.5rem 1rem;min-width:140px}
.metric-circle{width:130px;height:130px;margin:0 auto 1rem;border-radius:50%;position:relative;background:conic-gradient(var(--green) var(--pct,0%) var(--border) 0%)}
.metric-circle-num{position:absolute;inset:12px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--green);font-size:2rem;font-weight:900;font-family:'Anton',sans-serif}
.metric-pct{font-size:.5em;color:var(--tm);vertical-align:middle;margin-left:2px}
.metric-label{font-size:.65rem;color:var(--tm);text-transform:uppercase;letter-spacing:2px;font-weight:700}

/* Section common */
.section-title{font-size:1.8rem;color:var(--black);text-align:center;margin-bottom:.4rem;letter-spacing:2px}
.section-title::before{content:'▎';color:var(--green);margin-right:.4rem}
.section-sub{color:var(--tm);text-align:center;max-width:500px;margin:0 auto 2.5rem;font-size:.9rem;line-height:1.7;letter-spacing:.5px}

/* Disease cards */
.about{padding:5rem 1.5rem;max-width:1000px;margin:0 auto;border-top:1px solid var(--border)}
.disease-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem}
.d-card{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(209,213,219,.5);padding:1.25rem 1rem;text-align:center;transition:all .35s ease;position:relative;overflow:visible}
.d-card:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 8px 25px rgba(22,163,74,.1)}

/* SVG illustrations */
.d-card svg.d-card-anim{width:100%;height:auto;max-width:120px;display:block;margin:0 auto .3rem;overflow:visible}
.d-card svg.d-small{display:none}
.d-card h3{color:var(--black);font-size:.9rem;margin-bottom:.6rem;letter-spacing:1px}
.d-card p{font-size:.85rem;line-height:1.6;margin-bottom:.3rem;color:var(--tm)}
.d-card .d-symptom{color:var(--black)}
.d-card .d-fix{color:var(--green);font-weight:600}
.d-card--ill::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:var(--green)}
.d-card--ok::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:var(--green)}

/* Tech / Cara Kerja cards */
.tech{padding:5rem 1.5rem;background:var(--white);border-bottom:1px solid var(--border);border-top:1px solid var(--border)}
.hiw-cards,.tech-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;max-width:900px;margin:0 auto}
.tech-card{background:rgba(255,255,255,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(209,213,219,.5);padding:1.75rem 1.3rem;text-align:center;transition:var(--t);position:relative;overflow:hidden}
.tech-card:hover{border-color:var(--green);transform:translateY(-3px);box-shadow:0 8px 30px rgba(22,163,74,.1)}
.tech-card:hover::before{background:var(--green)}
.tech-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:transparent;transition:var(--t)}
.tech-card h3{color:var(--black);margin-bottom:.4rem;font-size:.9rem;letter-spacing:1px}
.tech-card p{color:var(--tm);font-size:.85rem;line-height:1.6}
.tech-badge-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--green);color:#fff;font-weight:900;font-size:.7rem;margin-bottom:.5rem;letter-spacing:1px}
.hiw-num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--green);color:#fff;font-family:'Anton',sans-serif;font-weight:700;font-size:1rem;margin-bottom:.5rem;letter-spacing:1px}

/* =====================================================
   PAGE: DETECT
   ===================================================== */
.detect-page{padding-top:80px;min-height:100vh;max-width:700px;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem;padding-bottom:2rem}
.detect-head{text-align:center;margin-bottom:1.5rem}
.detect-head h1{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:900;color:var(--black);margin:.5rem 0 1rem;letter-spacing:3px}
.btn-back-home,.btn-back-detect{display:inline-flex;align-items:center;gap:.3rem;background:none;border:none;color:var(--tm);font-weight:700;font-size:.8rem;cursor:pointer;font-family:'Noto Sans JP',sans-serif;transition:var(--t);text-transform:uppercase;letter-spacing:2px}
.btn-back-home:hover,.btn-back-detect:hover{color:var(--green)}
.btn-back-home svg,.btn-back-detect svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* Mode pills */
.mode-pills{display:flex;gap:0;justify-content:center;border:1px solid var(--border);width:fit-content;margin:0 auto;background:transparent}
.pill{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem 1.75rem;border:none;background:transparent;font-weight:800;font-size:.8rem;color:var(--tm);cursor:pointer;transition:var(--t);font-family:'Noto Sans JP',sans-serif;text-transform:uppercase;letter-spacing:2px}
.pill:hover{color:var(--green)}
.pill--active{background:var(--green);color:#fff}
.pill svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}

/* Camera & Upload */
.detect-body{margin-top:1.5rem;margin-bottom:1.5rem}
.cam-wrap{position:relative;width:100%;max-width:600px;margin:0 auto;background:var(--white);border:1px solid var(--border);aspect-ratio:4/3;overflow:hidden}
.cam-wrap::before,.cam-wrap::after{content:'';position:absolute;width:28px;height:28px;border:2px solid var(--green);z-index:10;pointer-events:none;transition:var(--t)}
.cam-wrap::before{top:14px;left:14px;border-right:none;border-bottom:none}
.cam-wrap::after{bottom:14px;right:14px;border-left:none;border-top:none}
.cam-wrap video,.cam-wrap canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.cam-wrap canvas{z-index:2}
.cam-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--tm);gap:.5rem;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:2px}
.cam-placeholder svg{width:44px;height:44px;stroke:var(--tm);stroke-width:1.5;fill:none}
.cam-placeholder.hidden{opacity:0;pointer-events:none}
.cam-status{text-align:center;margin-top:.6rem;font-size:.8rem;color:var(--tm);display:flex;align-items:center;justify-content:center;gap:.5rem;text-transform:uppercase;letter-spacing:2px}
.cam-dot{width:8px;height:8px;background:#ddd;display:inline-block;transition:var(--t)}
.cam-dot.live{background:var(--green);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* Upload zone */
.upload-zone{border:1px solid var(--border);padding:3.5rem 2rem;background:var(--card);cursor:pointer;text-align:center;transition:var(--t);max-width:600px;margin:0 auto}
.upload-zone:hover,.upload-zone.drag-over{border-color:var(--green);background:var(--green-light)}
.upload-zone svg{width:44px;height:44px;stroke:var(--tm);stroke-width:1.5;fill:none;margin:0 auto}
.up-label{font-weight:800;margin-top:.6rem;font-size:1rem;text-transform:uppercase;letter-spacing:2px;color:var(--black)}
.up-hint{font-size:.8rem;color:var(--tm);margin-top:.35rem}
.up-btn{display:inline-block;margin-top:1.25rem;padding:.7rem 2rem;background:var(--green);color:#fff;font-weight:800;cursor:pointer;transition:var(--t);text-transform:uppercase;letter-spacing:2px}
.up-btn:hover{background:var(--green-dark)}

/* Controls */
.detect-controls{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-bottom:1rem}
.btn-analyze{width:100%;max-width:400px;justify-content:center;padding:1rem 2rem}

/* Loading */
.loading-box{display:flex;flex-direction:column;align-items:center;padding:2.5rem;gap:.65rem}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--green);border-radius:0;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-box p{color:var(--tm);font-size:.8rem;text-transform:uppercase;letter-spacing:2px}

/* ====== HISTORY ====== */
#hist-section{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.hist-title{font-family:'Anton','Noto Sans JP',sans-serif;font-size:.9rem;color:var(--tm);text-transform:uppercase;letter-spacing:2px;text-align:center;margin-bottom:1rem}
.hist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.75rem;max-width:600px;margin:0 auto}
.hist-item{background:var(--white);border:1px solid var(--border);cursor:pointer;transition:var(--t);position:relative;overflow:hidden}
.hist-item:hover{border-color:var(--green);transform:translateY(-2px)}
.hist-item img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.hist-del{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.9);border:1px solid var(--border);color:var(--tm);width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--t);z-index:2;padding:0}
.hist-del:hover{color:#ef4444;border-color:#ef4444;background:#fff}
.hist-meta{padding:.35rem .5rem;display:flex;flex-direction:column;gap:.1rem}
.hist-time{font-size:.65rem;color:var(--tm);text-transform:uppercase;letter-spacing:.5px}
.hist-dom{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:1px}
.hist-sehat{color:var(--green)}
.hist-sakit{color:#ef4444}
.hist-mode{font-size:.6rem;color:var(--tm);letter-spacing:.5px}

/* ====== RESULTS ====== */
.results-page{padding-top:80px;max-width:900px;margin:0 auto;padding-left:1.25rem;padding-right:1.25rem;padding-bottom:3rem;animation:fadeUp .5s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.res-head{text-align:center;margin-bottom:2rem}
.res-head h1{font-size:clamp(1.5rem,4vw,2.5rem);color:var(--black);letter-spacing:3px}

/* Compare grid */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem}
.compare-card{background:var(--white);border:1px solid var(--border);padding:.5rem;position:relative;overflow:hidden}
.compare-card--wide{grid-column:1/-1}
.compare-card img{width:100%;display:block;filter:contrast(105%)}
.c-label{position:absolute;top:0;left:0;background:var(--green);color:#fff;padding:.25rem .7rem;font-family:'Anton','Noto Sans JP',sans-serif;font-weight:800;font-size:.65rem;text-transform:uppercase;letter-spacing:1px;z-index:2}
.c-label--crop{background:var(--ylw);color:#000}
.c-label--diag{background:var(--green-dark);color:#fff}

/* Diagnosis panel */
.diag-panel{background:var(--card);border:1px solid var(--border);padding:1.5rem;border-left:3px solid var(--green);margin-bottom:1.5rem;position:relative;overflow:hidden}
.diag-panel::after{content:'DIAG';position:absolute;right:-10px;bottom:-15px;font-size:5rem;font-family:'Anton';color:var(--green);opacity:.04;font-weight:800;pointer-events:none}
.diag-top{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:.6rem}
.diag-top h2{font-size:1.15rem;color:var(--black);letter-spacing:1px}
.diag-badge{padding:.2rem .75rem;font-size:.72rem;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:1px}
.diag-badge--sehat{background:var(--green)}
.diag-badge--sakit{background:#ef4444}
.diag-symptom strong,.diag-treat strong{color:var(--green);font-size:.75rem;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:.2rem;font-weight:700}
.diag-symptom p,.diag-treat p{color:var(--txt);line-height:1.65;font-size:.9rem}
.diag-treat{background:rgba(22,163,74,.06);border-left:2px solid var(--green);padding:.75rem 1rem;margin-top:.75rem}

/* Table */
.det-table-card{background:var(--white);border:1px solid var(--border);padding:1.5rem}
.det-table-card h3{font-size:.85rem;color:var(--black);margin-bottom:.75rem;text-transform:uppercase;letter-spacing:2px;font-family:'Noto Sans JP',sans-serif}
#det-table{width:100%;border-collapse:collapse}
#det-table th{padding:.6rem .75rem;text-align:left;border-bottom:2px solid var(--border);font-weight:700;color:var(--tm);font-size:.7rem;text-transform:uppercase;letter-spacing:1px}
#det-table td{padding:.65rem .75rem;border-bottom:1px solid var(--border);font-size:.85rem;vertical-align:middle;color:var(--black)}
.det-label{display:inline-flex;align-items:center;gap:.3rem;font-weight:700;text-transform:capitalize}
.d-icon{width:14px;height:14px;flex-shrink:0}
.d-icon--ok{color:var(--green)}
.d-icon--warn{color:var(--ylw)}
.conf-bar{width:100%;height:10px;background:var(--border);overflow:hidden}
.conf-fill{height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:6px;transition:width .8s var(--t);min-width:30px}
.conf-fill--high{background:var(--green)}
.conf-fill--med{background:var(--ylw)}
.conf-fill--low{background:#ef4444}
.conf-text-val{margin-left:.5rem;font-weight:800;font-size:.75rem;color:var(--tm);font-family:'Noto Sans JP',sans-serif;white-space:nowrap}
.conf-fill span{height:100%;border-radius:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:.6rem;font-weight:800}
.empty-row{text-align:center!important;color:var(--tm);font-style:italic;padding:1.5rem!important}

/* Action buttons */
.res-retry{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border);flex-wrap:wrap}
.res-retry button{min-width:185px;padding:.85rem 2rem;font-size:.85rem;font-weight:800;font-family:'Noto Sans JP',sans-serif;text-transform:uppercase;letter-spacing:2px;text-align:center;position:relative;overflow:hidden;cursor:pointer;transition:var(--t);display:inline-flex;align-items:center;justify-content:center;gap:.65rem;border:2px solid}
.res-retry .btn-download{color:var(--green);border-color:var(--green);background:transparent}
.res-retry .btn-download::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--green);transform:scaleX(0);transform-origin:right;transition:var(--t);z-index:0}
.res-retry .btn-download:hover::after{transform:scaleX(1);transform-origin:left}
.res-retry .btn-download:hover{color:#fff}
.res-retry .btn-download svg,.res-retry .btn-download span{position:relative;z-index:1}
.res-retry .btn-download svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}
.res-retry .btn-retry{color:var(--black);border-color:var(--black);background:transparent}
.res-retry .btn-retry::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--black);transform:scaleX(0);transform-origin:right;transition:var(--t);z-index:0}
.res-retry .btn-retry:hover::after{transform:scaleX(1);transform-origin:left}
.res-retry .btn-retry:hover{color:#fff}
.res-retry .btn-retry svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

/* Footer */
.footer{text-align:center;padding:1.5rem;background:var(--black);color:var(--tm);font-size:.75rem;border-top:1px solid var(--border);text-transform:uppercase;letter-spacing:1px}

/* ====== RESPONSIVE ====== */
@media(max-width:768px){
  .nav-links{display:none}
  .nav-hamburger{display:block}
  .compare-grid{grid-template-columns:1fr}
  .hero h1{font-size:2.5rem}
  .hero-stats{gap:.75rem 2rem}
  .cam-wrap::before{top:10px;left:10px;width:18px;height:18px}
  .cam-wrap::after{bottom:10px;right:10px;width:18px;height:18px}
}
@media(max-width:480px){
  .disease-grid,.hiw-cards,.tech-cards{grid-template-columns:1fr}
  .section-title{font-size:1.3rem}
  .hero{padding:5rem 1rem 2rem;align-items:stretch}
  .hero-inner{text-align:center}
  .hero h1{font-size:1.8rem}
  .hero p{font-size:.85rem}
  .hero-actions{flex-direction:column;gap:.5rem;width:100%}
  .btn-primary,.btn-outline{justify-content:center}
  .hero-stats{justify-content:center;gap:.4rem 1.5rem}
  .h-stat strong{font-size:1.5rem}
  .about,.tech{padding:2.5rem 1rem}
  .d-card{padding:1.25rem 1rem}
  .navbar{padding:0 1rem;height:56px}
  .navbar-logo{font-size:1rem;letter-spacing:1px}
  .mob-nav{top:56px}
  .detect-page{padding-left:.75rem;padding-right:.75rem;padding-bottom:1.5rem}
  .detect-head h1{font-size:1.3rem}
  .mode-pills{width:100%}
  .pill{flex:1;justify-content:center;padding:.55rem 1rem}
  .upload-zone{padding:2rem 1rem}
  .btn-analyze{width:100%;max-width:none}
  .results-page{padding-left:.75rem;padding-right:.75rem;padding-bottom:2rem}
  .res-head h1{font-size:1.2rem}
  .compare-grid{gap:.5rem}
  .compare-card{padding:.4rem}
  .c-label{font-size:.55rem;padding:.15rem .4rem}
  .diag-panel{padding:1rem}
  .det-table-card{padding:1rem;overflow-x:auto}
  .footer{padding:1rem;font-size:.65rem}
  .hist-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem}
  .btn-retry{padding:.85rem 1.5rem;font-size:.85rem;letter-spacing:2px}
  .metric-circle{width:100px;height:100px}
  .metric-circle-num{font-size:1.5rem;inset:8px}
}
@media(max-width:360px){
  .hero h1{font-size:1.5rem;letter-spacing:1px}
  .hero-stats{flex-direction:column;gap:.3rem}
  .h-stat{display:flex;align-items:baseline;gap:.3rem}
  .h-stat strong{font-size:1.2rem}
  .det-table-card h3{font-size:.8rem}
  #det-table th,#det-table td{padding:.4rem .55rem;font-size:.78rem}
}

/* ====== FADE-UP SCROLL ANIMATION ====== */
.fade-up{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}