/* 
  Razam Style - Price Platform Theme
  Full responsive, mobile-first
*/

:root {
    --bg-dark: #0f172a; --bg-light: #38bdf8;
    --glass-bg: rgba(255,255,255,0.08); --glass-border: rgba(255,255,255,0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0,0,0,0.3);
    --text-primary: #ffffff; --text-secondary: #94a3b8;
    --accent-primary: #3b82f6; --accent-hover: #2563eb;
    --success: #10b981; --warning: #f59e0b; --error: #ef4444;
    --container-width: 720px;
    --radius-lg: 16px; --radius-md: 8px;
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-family);color:var(--text-primary);background:linear-gradient(to top right,var(--bg-dark),var(--bg-light));min-height:100vh;padding:16px}
.layout{display:flex;justify-content:center;align-items:flex-start;max-width:var(--container-width);margin:0 auto}
.ad-mobile{display:none}
.app-container{flex:1;max-width:var(--container-width);min-width:0;background:var(--glass-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--glass-shadow);padding:32px 24px;animation:fade-in .6s ease-out}
@media(max-width:600px){.app-container{padding:20px 16px;border-radius:12px}body{padding:8px}}
header{text-align:center;margin-bottom:24px}
h1{font-size:clamp(1.6rem,5vw,2.5rem);font-weight:700;margin-bottom:.4rem;background:linear-gradient(to right,#ffffff,#93c5fd);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.subtitle{color:var(--text-secondary);font-size:.9rem}
.tabs{display:flex;justify-content:center;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.tab-btn{background:transparent;border:1px solid var(--glass-border);color:var(--text-secondary);padding:9px 20px;border-radius:50px;cursor:pointer;transition:all .3s;font-size:.9rem;font-weight:500}
.tab-btn:hover{background:rgba(255,255,255,.05);color:var(--text-primary)}
.tab-btn.active{background:var(--accent-primary);border-color:var(--accent-primary);color:white;box-shadow:0 0 15px rgba(59,130,246,.5)}
.view-section{display:none;animation:slide-up .4s ease-out}
.view-section.active{display:block}
.input-group{margin-bottom:16px}
.input-hint{font-size:.8rem;color:var(--text-secondary);margin-top:4px}
label{display:block;margin-bottom:6px;color:var(--text-secondary);font-weight:500;font-size:.9rem}
input[type=text],input[type=url],select{width:100%;padding:12px 14px;background:rgba(15,23,42,.6);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:white;font-size:.95rem;transition:border-color .3s}
input:focus,select:focus{outline:none;border-color:var(--accent-primary)}
.autocomplete-wrapper{position:relative}
.autocomplete-dropdown{position:absolute;top:100%;left:0;right:0;z-index:100;background:rgba(15,23,42,.95);border:1px solid var(--glass-border);border-radius:0 0 var(--radius-md) var(--radius-md);max-height:240px;overflow-y:auto;display:none;backdrop-filter:blur(8px)}
.autocomplete-dropdown.active{display:block}
.autocomplete-item{padding:10px 14px;cursor:pointer;font-size:.9rem;border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s}
.autocomplete-item:hover,.autocomplete-item.active{background:rgba(59,130,246,.15)}
.autocomplete-item .match{color:var(--accent-primary)}
.autocomplete-item .storage{color:var(--text-secondary);font-size:.8rem}
.toggle-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:20px}
.toggle-card{background:rgba(15,23,42,.4);padding:10px 12px;border-radius:var(--radius-md);display:flex;justify-content:space-between;align-items:center;border:1px solid transparent;cursor:pointer;transition:all .2s}
.toggle-card:hover{border-color:rgba(255,255,255,.1)}
.toggle-card span{font-size:.8rem;line-height:1.3}
.toggle-switch{position:relative;width:40px;height:22px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#334155;transition:.4s;border-radius:22px}
.slider:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background-color:white;transition:.4s;border-radius:50%}
input:checked+.slider{background-color:var(--accent-primary)}
input:checked+.slider:before{transform:translateX(18px)}
.btn-primary{width:100%;padding:14px;background:var(--accent-primary);color:white;border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,background .2s}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.7;cursor:wait}
#result-area{margin-top:32px;border-top:1px solid var(--glass-border);padding-top:24px}
.result-card{background:rgba(15,23,42,.4);border-radius:var(--radius-md);padding:24px 20px;text-align:center;position:relative}
.unavailable-box{padding:24px 16px;margin:16px 0;background:rgba(245,158,11,.08);border:1px dashed rgba(245,158,11,.3);border-radius:var(--radius-md)}
.unavailable-icon{font-size:2rem;margin-bottom:8px}
.unavailable-text{color:#fde68a;font-size:.95rem;line-height:1.5}
.price-display{margin:16px 0}
.price-row{display:flex;align-items:baseline;justify-content:center;gap:20px;flex-wrap:wrap}
.price-col{display:flex;flex-direction:column;align-items:center;gap:2px}
.price-main{font-size:clamp(2rem,8vw,3rem);font-weight:800;background:linear-gradient(to right,#38bdf8,#3b82f6);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.price-side{font-size:clamp(1rem,4vw,1.5rem);font-weight:600;color:var(--text-secondary)}
.price-label{font-size:.65rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;font-weight:500}
.stats-info{font-size:.82rem;color:var(--text-secondary);margin-top:4px;line-height:1.4}
.stats-info .conf-HIGH{color:#6ee7b7;font-weight:600}
.stats-info .conf-MEDIUM{color:#fde68a;font-weight:600}
.stats-info .conf-LOW{color:#fca5a5;font-weight:600}
.deal-compare-line{font-size:.82rem;color:#dbeafe;margin-top:6px;padding:6px 12px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:var(--radius-md);display:inline-block}
.condition-badge{display:inline-block;padding:5px 10px;border-radius:4px;font-size:.8rem;font-weight:600;margin-bottom:12px;background:#334155}
.badge-A{background:rgba(16,185,129,.2);color:#34d399}
.badge-B{background:rgba(59,130,246,.2);color:#60a5fa}
.badge-D{background:rgba(239,68,68,.2);color:#f87171}
.deal-badge{position:absolute;top:-12px;right:16px;padding:7px 14px;border-radius:20px;font-weight:700;box-shadow:0 4px 6px rgba(0,0,0,.3);text-transform:uppercase;font-size:.75rem}
.deal-CHEAP{background:var(--success);color:white}
.deal-FAIR{background:var(--accent-primary);color:white}
.deal-EXPENSIVE{background:var(--error);color:white}
.valuation-matrix{margin-top:24px;border-top:1px solid var(--glass-border);padding-top:20px}
.valuation-matrix h3{font-size:.85rem;color:var(--text-secondary);margin-bottom:14px;text-transform:uppercase;letter-spacing:1px}
.matrix-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.matrix-card{background:rgba(15,23,42,.5);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:14px;text-align:center;transition:border-color .2s,transform .2s}
.matrix-card:hover{transform:translateY(-2px)}
.matrix-card.active{border-color:var(--accent-primary);box-shadow:0 0 12px rgba(59,130,246,.25)}
.matrix-card .card-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase;margin-bottom:4px}
.matrix-card .card-price{font-size:1.3rem;font-weight:700}
.matrix-card .card-note{font-size:.7rem;color:var(--text-secondary);margin-top:2px}
.matrix-card.card-A{border-left:3px solid #34d399}
.matrix-card.card-B{border-left:3px solid var(--accent-primary)}
.matrix-card.card-D{border-left:3px solid #f87171}
.confidence-pill{display:inline-block;margin-top:10px;padding:5px 10px;border-radius:999px;font-size:.75rem;font-weight:700;text-transform:uppercase}
.confidence-pill.band-HIGH{background:rgba(16,185,129,.16);border:1px solid rgba(16,185,129,.45);color:#6ee7b7}
.confidence-pill.band-MEDIUM{background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.45);color:#fde68a}
.confidence-pill.band-LOW{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.45);color:#fca5a5}
.explanation-box{text-align:left;margin-top:14px;padding:12px;background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.25);border-radius:var(--radius-md);color:#dbeafe;font-size:.88rem;line-height:1.5}
.reason-codes{text-align:left;margin-top:14px;padding:12px;border-radius:var(--radius-md);background:rgba(15,23,42,.35);border:1px solid rgba(148,163,184,.35)}
.hardware-info{margin-top:20px;padding:18px;background:rgba(15,23,42,.35);border:1px solid var(--glass-border);border-radius:var(--radius-md);text-align:left}
.hardware-info h3{font-size:.95rem;margin-bottom:14px;color:var(--text-primary)}
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 14px}
.spec-item{display:flex;flex-direction:column;gap:3px;padding:8px 10px;background:rgba(255,255,255,.03);border-radius:6px}
.spec-label{font-size:.68rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em}
.spec-value{font-size:.88rem;font-weight:500}
.spec-source{margin-top:8px;font-size:.75rem;color:var(--text-secondary)}
.spec-image-frame{border-radius:12px;padding:8px;margin-bottom:10px;background:linear-gradient(145deg,rgba(56,189,248,.12),rgba(59,130,246,.08));border:1px solid rgba(59,130,246,.25)}
.spec-image{width:100%;max-height:180px;object-fit:contain;display:block}
.penalties-list{text-align:left;margin-top:14px;padding:10px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);border-radius:var(--radius-md)}
.warnings-list{text-align:left;margin-top:14px;padding:10px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius-md)}
.warning-item{color:#fca5a5;font-size:.82rem;margin-bottom:3px}
.penalty-item{color:#fde68a;font-size:.82rem;margin-bottom:3px}
@keyframes fade-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes slide-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.loading-spinner{border:3px solid rgba(255,255,255,.1);border-radius:50%;border-top:3px solid var(--accent-primary);width:24px;height:24px;animation:spin 1s linear infinite;display:inline-block;vertical-align:middle;margin-right:8px}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
/* Matrix Table */
.valuation-matrix {
    margin-top: 30px;
    border-top: 1px solid var(--glass-border);
    padding-top: 20px;
}

.valuation-matrix h3 {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.matrix-table {
    width: 100%;
    border-collapse: collapse;
}

.matrix-table th, .matrix-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--glass-border);
}

.matrix-table th {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.matrix-table td {
    font-size: 1rem;
    font-weight: 600;
}

.matrix-table .col-condition {
    width: 40%;
}

.matrix-table .col-price {
    width: 60%;
    text-align: right;
    color: var(--text-primary);
}

.matrix-table tr.active-condition {
    background: rgba(59, 130, 246, 0.1);
}

.matrix-table tr:last-child td {
    border-bottom: none;
}

/* Price Curve Chart */
.price-curve-section {
    margin-top: 20px;
    padding: 16px;
    background: rgba(15, 23, 42, 0.35);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    text-align: left;
}
.price-curve-section h3 {
    font-size: 0.95rem;
    margin-bottom: 12px;
}
.chart-container {
    position: relative;
    width: 100%;
    height: 260px;
    margin-bottom: 10px;
}
.chart-legend {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.legend-past { background: #4A90D9; }
.legend-now { background: #EF4444; }
.legend-future { background: transparent; border: 2px dashed #4A90D9; }
.legend-actual { background: #2ECC71; }