:root{
    /* رنگ‌ها از لوگو: فیروزه‌ای روشن/میانه/تیره */
    --brand:#1ab9cf;          /* روشن */
    --brand-mid:#1a95a7;      /* میانه */
    --brand-deep:#0e3a42;     /* تیره (سایه‌ها) */
    --ink:#0f172a;
    --muted:#617089;
  
    --box-w:min(92vw, 1080px);
    --box-h:min(88vh, 780px);
    --key-size:70px;
    --radius:18px;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;font-family:"Vazirmatn",system-ui,Segoe UI,Roboto;color:var(--ink)}
  body.no-scroll{overflow:hidden;    display: flex;
    align-items: center;}
  
  /* پس‌زمینه با ته‌رنگ لوگو */
  .bg{
    position:fixed; inset:0; z-index:-1;
    background:
      radial-gradient(1200px 800px at 70% -10%, rgba(18,195,204,.22), transparent 60%),
      radial-gradient(900px 700px at 10% 110%, rgba(8,177,186,.14), transparent 60%),
      linear-gradient(135deg, #ffffff, #f5ffff 40%, #e9fffe 60%, #ffffff 100%);
    animation: float 12s ease-in-out infinite alternate;
 
  }
  @keyframes float{0%{transform:translateY(-1%)}100%{transform:translateY(1%)}}
  
  .container{
    width:var(--box-w); height:var(--box-h);
    margin:auto; display:flex; flex-direction:column;
    background:rgba(255,255,255,.75);
    backdrop-filter:saturate(180%) blur(10px);
    border:1px solid rgba(15,23,42,.08);
    border-radius:calc(var(--radius) + 6px);
    box-shadow:0 30px 70px rgba(2,8,23,.12);
    overflow:hidden;
    
  }
  
  /* هدر */
  .header{
    padding:12px 18px; border-bottom:1px solid rgba(15,23,42,.08);
    background:linear-gradient(180deg, rgba(185, 223, 255, 0.856), rgba(33, 196, 218, 0.45));
  }
  .brand{display:flex; align-items:center; gap:12px}
  .brand-logo{width:40px; height:40px; display:block; filter:drop-shadow(0 8px 12px rgba(10,110,117,.28))}
  .brand-text strong{font-weight:900; letter-spacing:-.01em}
  .sub{display:block; font-size:.85rem; color:var(--muted)}
  
  /* بدنه */
  .content{position:relative; flex:1;}
  /* کلیدها سمت راستِ باکس */
  .keypad{position:absolute; right:16px; top:50%; transform:translateY(-50%);}
  .keyboard-toggle{
    display:none; width:48px; height:48px; border-radius:12px; border:none; cursor:pointer;
    background:linear-gradient(180deg,var(--brand),var(--brand-mid)); color:#fff; font-weight:900;
    box-shadow:0 10px 20px rgba(10,110,117,.28)
  }
  .keys-container{
    display:grid; gap:14px; justify-items:center;
    background:rgba(255,255,255,.7); border:1px solid rgba(15,23,42,.08);
    padding:14px; border-radius:16px; box-shadow:0 12px 28px rgba(2,8,23,.12);
  }
  
  /* دکمه ماشین‌حساب: عدد+لیبل داخل کلید */
  .key{
    width:var(--key-size); height:var(--key-size); border:none; cursor:pointer; position:relative;
    border-radius:16px; display:grid; place-items:center; padding:0;
    background:
      linear-gradient(180deg, #fefefe, #e9eef3),
      radial-gradient(180% 140% at 50% 20%, rgba(255,255,255,.85), transparent 45%);
    box-shadow:
      0 10px 20px rgba(2,8,23,.18),
      inset 0 2px 0 rgba(255,255,255,.95),
      inset 0 -3px 8px rgba(15,23,42,.12),
      0 0 0 1px rgba(15,23,42,.08);
    transition: transform .08s ease, box-shadow .12s ease, background .2s ease, color .2s ease;
  }
  .key:hover{ transform:translateY(-2px) }
  .key:active{ transform:translateY(1px) }
  .key.active{
    background:linear-gradient(180deg, var(--brand), var(--brand-mid));
    box-shadow:
      0 10px 22px rgba(10,110,117,.35),
      inset 0 2px 0 rgba(255,255,255,.9),
      inset 0 -4px 12px rgba(1,78,74,.28),
      0 0 0 1px rgba(1,78,74,.18);
    color:#fff;
  }
  .key-inner{
    display:grid; justify-items:center; gap:2px; line-height:1;
  }
  .key-num{font-weight:900; font-size:22px; color:#0b3555}
  .key-label{font-size:.75rem; font-weight:800; color:#475569}
  .key.active .key-num, .key.active .key-label{ color:#fff }
  .key-led{
    position:absolute; inset:auto 9px 9px auto; width:8px; height:8px; border-radius:50%;
    background:#cbd5e1; box-shadow:0 0 0 2px #fff;
  }
  .key.active .key-led{
    background:var(--brand); box-shadow:0 0 0 2px #fff, 0 0 10px var(--brand);
  }
  
  /* صفحات وسط اسکرین */
  .pages{
    position:absolute; inset:0 120px 0 0; /* راست جای کلیدها خالی می‌ماند */
    display:grid; place-items:center; pointer-events:none; /* صفحات داخل خودش pointer دارند */
    
  }
  .book-3d{ perspective:1400px }
  .page{
    position:absolute; width:calc(100% - 40px); height:calc(100% - 40px);
    padding:26px 28px 36px; border-radius:var(--radius);
    background:
      radial-gradient(1000px 600px at 20% -10%, rgba(0,0,0,.05), transparent 65%),
      radial-gradient(1000px 600px at 80% 110%, rgba(0,0,0,.05), transparent 65%),
      linear-gradient(180deg, #fff 0%, #f7fafc 100%);
    border:1px solid rgba(15,23,42,.06);
    box-shadow:0 24px 60px rgba(2,8,23,.12), inset 0 0 0 1px rgba(255,255,255,.65);
    opacity:0; transform:translateX(100%) rotateY(-35deg); transform-origin:right center;
    transition:transform .6s cubic-bezier(.2,.7,.2,1), opacity .45s;
    pointer-events:auto;
  }
  .page::before{
    content:""; position:absolute; top:0; bottom:0; right:-1px; width:24px; border-radius:0 var(--radius) var(--radius) 0;
    background:linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.02)); opacity:.45;
  }
  .page.active{opacity:1; transform:translateX(0) rotateY(0); z-index:2}
  .page.from-left { transform:translateX(-100%) rotateY(35deg); transform-origin:left center }
  .page.leave-left{ transform:translateX(-110%) rotateY(35deg); opacity:0; transform-origin:left center }
  .page.leave-right{ transform:translateX(110%) rotateY(-35deg); opacity:0; transform-origin:right center }
  
  .page-title{
    margin:0 0 .8rem 0; font-weight:900; letter-spacing:-.02em;
    color:var(--brand-deep); font-size:1.55rem; display:flex; align-items:center; gap:.5rem;
     padding-right: 10px;
  }
  .page-title::before{
    content:""; width:10px; height:10px; border-radius:50%;
    background:var(--brand-mid); box-shadow:0 0 0 4px rgba(18,195,204,.18);
  }
  .page-body{ color:#1f2937; line-height:1.9; padding-right: 15px;}
  .page-body.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:14px }
  .bullets{ margin:0; padding:0 1rem 0 0 }
  .bullets li{ margin:.3rem 0; }
  .bullets b{ color:#0b5e5c }
  .page-number{ position:absolute; left:22px; bottom:16px; color:#6b7280; font-weight:700 }
  
  /* موبایل/تبلت */
  @media (max-width: 900px){ :root{ --key-size:64px } }
  @media (max-width: 720px){
    .pages{ inset:60px 0 0 0 }     /* کلیدها می‌آیند بالا/روی */
    .keypad{ right:12px; top:12px; transform:none }
    .keyboard-toggle{ display:inline-grid; place-items:center; margin-bottom:10px }
    .keys-container{ position:absolute; right:12px; top:60px; opacity:0; transform:translateY(-10px); pointer-events:none; transition:.25s; }
    .keys-container.active{ opacity:1; transform:none; pointer-events:all }
    .page{ width:calc(100% - 24px); height:calc(100% - 24px); padding:20px }
    .page-body.two-col{ grid-template-columns:1fr }
  }
  

  /* فقط کوچک‌سازی فونت‌ها روی موبایل‌ها — هیچ تغییر دیگری ندارد */

/* موبایل‌های معمولی */
@media (max-width: 720px){
    html{ font-size:15px; }            /* تمام اندازه‌های rem کوچک‌تر می‌شود */
    .key-num{ font-size:20px; }        /* عدد روی کلید */
  }
  
  /* موبایل‌های کوچک‌تر */
  @media (max-width: 540px){
    html{ font-size:14px; }
    .key-num{ font-size:18px; }
    .key-label{ font-size:1rem; }
    .sub{ font-size:.80rem; }          /* زیرعنوان برند */
  }
  
  /* خیلی کوچک (۴” تا 4.7”) */
  @media (max-width: 380px){
    html{ font-size:13px; }
    .key-num{ font-size:16px; }
    .key-label{ font-size:.85rem; }
    .page-number{ font-size:.80rem; }
  }