* { box-sizing: border-box; font-family: "Vazirmatn", Tahoma, sans-serif; }

    :root{
      --bg1:#0f172a; --bg2:#1e293b; --bg3:#334155;
      --card: rgba(255,255,255,0.08);
      --card-border: rgba(255,255,255,0.15);
      --text:#ffffff;
      --muted:#cbd5e1;
      --muted2:#94a3b8;
      --input-bg: rgba(255,255,255,0.12);
      --input-bg-focus: rgba(255,255,255,0.18);
      --focus-ring: rgba(59,130,246,0.5);
      --accent1:#f59e0b; --accent2:#f97316;
      --shadow: 0 20px 50px rgba(0,0,0,0.35);
      --tab-bg: rgba(255,255,255,0.08);
      --details-bg: rgba(255,255,255,0.06);
      --result-bg: rgba(255,255,255,0.10);
      --divider: rgba(255,255,255,0.15);
      --price:#facc15;
    }

    body[data-theme="light"]{
      --bg1:#f8fafc; --bg2:#eef2ff; --bg3:#e2e8f0;
      --card: rgba(255,255,255,0.85);
      --card-border: rgba(15,23,42,0.08);
      --text:#0f172a;
      --muted:#334155;
      --muted2:#475569;
      --input-bg: rgba(15,23,42,0.06);
      --input-bg-focus: rgba(15,23,42,0.09);
      --focus-ring: rgba(37,99,235,0.35);
      --shadow: 0 18px 45px rgba(2,6,23,0.10);
      --tab-bg: rgba(15,23,42,0.06);
      --details-bg: rgba(15,23,42,0.04);
      --result-bg: rgba(15,23,42,0.04);
      --divider: rgba(15,23,42,0.12);
      --price:#b45309;
    }

    body{
      margin:0; min-height:100vh;
      background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
      display:flex; align-items:center; justify-content:center;
      color: var(--text);
      padding: 18px;
    }

    .card{
      width:100%; max-width: 520px;
      background: var(--card);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border:1px solid var(--card-border);
      border-radius:24px;
      padding:22px 22px 28px;
      box-shadow: var(--shadow);
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom: 10px;
    }

    .title{
      font-size:22px;
      font-weight:900;
      margin:0;
      color: var(--text);
    }

    .theme-toggle{
      display:flex; align-items:center; gap:10px;
      color: var(--muted);
      font-size: 13px;
      user-select:none;
      white-space: nowrap;
      cursor: pointer;
    }

    .switch{
      position:relative;
      width: 52px;
      height: 30px;
      border-radius: 999px;
      background: var(--tab-bg);
      border: 1px solid var(--card-border);
      padding: 3px;
      transition: 0.25s;
      flex: 0 0 auto;
    }

    .knob{
      width: 24px;
      height: 24px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent1), var(--accent2));
      transform: translateX(0);
      transition: transform 0.25s ease;
    }

    body[data-theme="light"] .knob{
      transform: translateX(-22px);
    }

    .subtitle{
      margin: 4px 0 18px;
      color: var(--muted2);
      font-size: 13px;
    }

    .tabs{
      display:flex; gap:8px;
      background: var(--tab-bg);
      border-radius:14px; padding:6px; margin-bottom:22px;
      border: 1px solid var(--card-border);
    }

    .tab-btn{
      flex:1; padding:12px; border:none; border-radius:10px;
      cursor:pointer; font-size:15px; font-weight:900;
      color: var(--text);
      background: transparent; transition: 0.25s;
    }

    .tab-btn.active{
      background: linear-gradient(135deg, var(--accent1), var(--accent2));
      box-shadow: 0 8px 20px rgba(249,115,22,0.25);
      color: #fff;
    }

    .tab-content{ display:none; }
    .tab-content.active{ display:block; }

    .form-group{ margin-bottom:16px; }

    label{
      display:block; margin-bottom:8px;
      font-size:14px; color: var(--muted);
    }

    input{
      width:100%;
      padding:14px 16px;
      border:none; outline:none;
      border-radius:14px;
      background: var(--input-bg);
      color: var(--text);
      font-size:16px;
      transition:0.25s;
    }

    input::placeholder{
      color: var(--placeholder);
      opacity: 1;
}


    input:focus{
      background: var(--input-bg-focus);
      box-shadow: 0 0 0 2px var(--focus-ring);
    }

    .btn{
      width:100%;
      padding:14px;
      border:none; border-radius:14px;
      background: linear-gradient(135deg, var(--accent1), var(--accent2));
      color:#fff;
      font-size:17px; font-weight:900;
      cursor:pointer; transition:0.25s; margin-top:8px;
    }

    .btn:hover{
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(249,115,22,0.28);
    }

    .result{
      margin-top:18px;
      padding:16px;
      border-radius:16px;
      background: var(--result-bg);
      text-align:center;
      display:none;
      border: 1px solid var(--card-border);
    }

    .result h3{
      margin:0 0 10px;
      font-size:15px;
      color: var(--muted2);
      font-weight:600;
    }

    .price{
      font-size:28px;
      font-weight:950;
      color: var(--price);
    }

    .details{
      margin-top:14px;
      font-size:14px;
      color: var(--text);
      line-height:2;
      text-align:right;
      background: var(--details-bg);
      padding:12px;
      border-radius:12px;
      border: 1px solid var(--card-border);
    }

    .details hr{
      border:none;
      border-top:1px solid var(--divider);
      margin:10px 0;
    }

    .hint{
      margin-top:12px;
      text-align:center;
      font-size:12px;
      color: var(--muted2);
      line-height:1.8;
    }
    body[data-theme="light"] input::placeholder { 
        color: #888; 
        opacity: 1; 
    }
    body[data-theme="dark"] input::placeholder { 
        color: #a0a0a0; 
        opacity: 1; 
    }

.karat-options {
    display: flex; /* فعال کردن چیدمان انعطاف‌پذیر */
    width: 100%;   /* عرض باکس برابر با عرض اینپوت (والد) می‌شود */
    gap: 8px;      /* فاصله خیلی کم بین دکمه‌ها برای زیبایی */
    margin-top: 5px;
}

.karat-options button {
    flex: 1;       /* این دستور جادویی است: هر دکمه ۱ سهم از فضا را می‌گیرد */
    padding: 10px 0;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
    transition: 0.3s;
}

.karat-options button:hover {
    background-color: #ffc14d66;
}