.yats, .yats * { box-sizing: border-box; }
.yats { --ink:#14223b; --muted:#687b96; --line:#e3e9f4; --blue:#4257dc; --blue2:#7d59ed; --cream:#f8faff; color:var(--ink); font-family:Inter,"Noto Sans Arabic",Tahoma,Arial,sans-serif; max-width:1250px; margin:28px auto; font-size:15px; line-height:1.65; }
.yats button,.yats select,.yats input { font:inherit; }
.yats .yats-hero { background:linear-gradient(123deg,#18244f,#454cbd 65%,#7654db); border-radius:22px; padding:26px 34px 38px; color:white; box-shadow:0 18px 42px rgba(45,65,142,.14); }
.yats .yats-topline { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px; }
.yats .yats-mark { font-weight:800; letter-spacing:.09em; font-size:16px; }
.yats .yats-topline select { background:#ffffff1a; color:white; border:1px solid #ffffff61; border-radius:9px; padding:6px 9px; min-width:90px; }
.yats .yats-topline option { color:#17213b; }
.yats .yats-eyebrow { letter-spacing:.25em; font-weight:700; font-size:11px; color:#b9e8f3; margin:0 0 8px; }
.yats .yats-hero h2 { font-size:clamp(29px,4vw,43px); font-weight:800; line-height:1.4; color:white; margin:0 0 7px; }
.yats .yats-lead { margin:0; max-width:600px; color:#e7e9ff; font-size:15px; }
.yats .yats-account { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:18px 0; }
.yats .yats-account>div { background:#fff; border:1px solid var(--line); border-radius:15px; padding:15px; min-width:0; }
.yats .yats-account span { color:var(--muted); display:block; font-size:12px; margin-bottom:4px; }
.yats .yats-account strong { display:block; overflow-wrap:anywhere; font-size:14px; }
.yats .yats-services { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0 0 18px; }
.yats .yats-service-tab { display:flex; flex-direction:column; text-align:start; align-items:flex-start; gap:3px; min-width:0; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 17px; cursor:pointer; color:#35435d; box-shadow:0 3px 12px #2639670a; }
.yats .yats-service-tab span { font-size:20px; }
.yats .yats-service-tab b { font-size:15px; }
.yats .yats-service-tab small { font-size:11px; color:var(--muted); }
.yats .yats-service-tab.is-active { color:#3340b4; border-color:#6770e2; background:#f3f3ff; box-shadow:inset 0 0 0 1px #6976df; }
.yats .yats-layout { display:grid; grid-template-columns:minmax(0,1.85fr) minmax(280px,1fr); gap:18px; align-items:start; }
.yats .yats-main,.yats .yats-side { display:grid; gap:18px; min-width:0; }
.yats .yats-card { border:1px solid var(--line); border-radius:19px; background:white; padding:25px; box-shadow:0 5px 22px rgba(20,34,59,.03); }
.yats .yats-card h3 { font-size:19px; color:var(--ink); font-weight:800; margin:0 0 5px; }
.yats .yats-card p { font-size:13px; color:var(--muted); margin:0 0 18px; }
.yats .yats-card-heading { display:flex; align-items:start; gap:13px; margin-bottom:15px; }
.yats .yats-step { background:#eef0ff; color:#4257dc; font-size:12px; border-radius:11px; padding:8px 10px; font-weight:800; }
.yats label { font-size:13px; font-weight:750; color:#30415d; display:block; margin:14px 0 6px; }
.yats input,.yats select { width:100%; border:1px solid #d5deed; outline:none; color:#1d2a44; background:#fff; border-radius:11px; padding:12px 14px; max-width:100%; min-height:46px; }
.yats input:focus,.yats select:focus { border-color:#6e6be5; box-shadow:0 0 0 3px #625ce51c; }
.yats .yats-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.yats .yats-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.yats .yats-button { appearance:none; border:0; border-radius:11px; cursor:pointer; font-weight:750; padding:11px 18px; min-height:43px; transition:transform .1s,background .2s; text-align:center; }
.yats .yats-button:hover:not(:disabled) { transform:translateY(-1px); }
.yats .yats-button:disabled { opacity:.5; cursor:not-allowed; }
.yats .yats-primary { background:linear-gradient(110deg,var(--blue),var(--blue2)); color:white; }
.yats .yats-secondary { background:#f0f3ff; color:#3e4ab1; }
.yats .yats-side .yats-button { display:block; width:100%; margin-top:14px; }
.yats .yats-result-title { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:13px; }
.yats .yats-result-actions { display:flex; flex-wrap:wrap; gap:7px; }
.yats .yats-result-title .yats-button { font-size:12px; padding:8px 12px; }
.yats .yats-usage { margin:0 0 12px!important; color:#4d60bf!important; font-weight:700; }
.yats .yats-result-card #yats-feedback { margin-bottom:13px; }
.yats .yats-error { color:#b32636!important; }
.yats .yats-plan-list { display:grid; gap:8px; }
.yats .yats-plan { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:9px 11px; margin:0; cursor:pointer; }
.yats .yats-plan:has(input:checked) { background:#f3f3ff; border-color:#6770e2; }
.yats .yats-plan input { width:auto;min-height:0;flex:0 0 auto;accent-color:#4d58ca; }
.yats .yats-plan span { flex:1;display:flex;flex-direction:column; }
.yats .yats-plan strong {font-size:13px;} .yats .yats-plan small {font-size:11px;color:var(--muted);}
.yats .yats-plan b {font-size:12px;white-space:nowrap;color:#3845ab;}
.yats .yats-template-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px; }
.yats .yats-template { display:flex;flex-direction:column;align-items:center;gap:4px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:10px;cursor:pointer;color:var(--ink); }
.yats .yats-template.is-active { border-color:#5b61ce;background:#f0f1ff;box-shadow:inset 0 0 0 1px #5b61ce; }
.yats .yats-template.is-locked { background:#f7f7fa; }
.yats .yats-template b {font-size:12px;} .yats .yats-template small {font-size:10px;color:#6f7f9b;font-weight:800;}
.yats .yats-template-swatch {display:block;width:100%;height:54px;border:1px solid #d9dfeb;border-radius:5px;background:linear-gradient(#e8edf5 0 12px,#fff 12px 25px,#d5ddec 25px 28px,#fff 28px);position:relative;}
.yats .yats-template-swatch:after {content:"";position:absolute;left:17%;right:17%;bottom:10px;height:5px;border-radius:2px;background:#dde4f0;}
.yats .yats-template-swatch.colorful {background:linear-gradient(135deg,#d3f8f2 0 30%,#fff 30% 80%,#e8fbf8 80%);border-color:#9cdbd5;}
.yats .yats-template-swatch.premium {background:linear-gradient(#192b62 0 14px,#fff 14px 100%);border-color:#d7c294;}
.yats .yats-template-swatch.magazine {background:linear-gradient(115deg,#b58dde 0 36%,#fff 36% 100%);border-color:#b58dde;}
.yats .yats-feedback { margin:12px 0 0!important; overflow-wrap:anywhere; }
.yats .yats-help ol { margin:12px 18px 0 0; padding:0; color:var(--muted); }
.yats[dir=ltr] .yats-help ol { margin:12px 0 0 18px; }
.yats .yats-help li { margin:9px 0; }
.yats .yats-notice { margin:20px 0; padding:22px 26px; border-radius:14px; }
.yats .yats-warning { background:#fffaed; border:1px solid #f1dca9; }
.yats .yats-notice p { margin:5px 0 0; }
.yats .yats-paper { background:#fff; border:1px solid #dce3f0; border-radius:10px; padding:clamp(18px,4vw,38px); color:#18243d; margin:12px auto 0; width:100%; max-width:780px; min-height:480px; box-shadow:0 12px 28px #23345b0d; }
.yats .yats-paper.is-editing {outline:3px dashed #8674d8;outline-offset:4px;}
.yats .yats-paper-brand { font-size:10px; font-weight:800; letter-spacing:.16em; color:#6974ae; }
.yats .yats-paper-title { font-size:25px; line-height:1.5; font-weight:800; margin:12px 0 22px; border-bottom:2px solid #dde3f2; padding-bottom:12px; }
.yats .yats-paper-meta {font-size:11px;color:#76839b;margin-top:-11px;margin-bottom:20px;}
.yats[data-template=colorful] .yats-paper-title {color:#0e8a92;border-color:#7bd7cf;}
.yats[data-template=colorful] .yats-paper-section h4 {color:#0e8a92;}
.yats[data-template=premium] .yats-paper {border-top:8px solid #182b64;}
.yats[data-template=premium] .yats-paper-title {color:#182b64;border-color:#d2b16f;}
.yats[data-template=premium] .yats-paper-section h4 {color:#9c792d;}
.yats[data-template=magazine] .yats-paper {border-top:8px solid #8053b2;}
.yats[data-template=magazine] .yats-paper-title {font-size:30px;color:#7042a4;border-color:#b58bd9;}
.yats[data-template=magazine] .yats-paper-section h4 {color:#7042a4;}
.yats .yats-paper-section { margin:18px 0 24px; }
.yats .yats-paper-section h4 { font-size:16px; font-weight:800; color:#3446a0; margin:0 0 8px; }
.yats .yats-paper-section ol { padding-inline-start:22px; margin:0; }
.yats .yats-paper-section li { margin-bottom:8px; white-space:pre-wrap; overflow-wrap:anywhere; }
.yats .yats-paper-section ul { padding-inline-start:20px; margin:3px 0 0; }
.yats .yats-sample-watermark { color:#875c0e; background:#fff7da; border-radius:7px; padding:7px 12px; margin:14px 0; font-size:12px; }
.yats .yats-answer-key { padding:16px; border:1px dashed #aeb6d6; background:#fafbff; border-radius:10px; }
.yats.yats-show-student .yats-answer-key {display:none;}
.yats .yats-paper-footer { margin-top:30px; color:#8895b6; border-top:1px solid #e1e6f1; padding-top:12px; font-size:10px; }
@media(max-width:850px) { .yats .yats-layout {grid-template-columns:1fr;} .yats .yats-account {grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(max-width:500px) { .yats {margin:12px auto;} .yats .yats-hero {padding:20px;border-radius:15px;} .yats .yats-card {padding:17px;} .yats .yats-form-grid {grid-template-columns:1fr;gap:0;} .yats .yats-account {gap:7px;} .yats .yats-account>div {padding:12px;} .yats .yats-result-title {align-items:start;flex-direction:column;} .yats .yats-paper {padding:18px;} .yats .yats-service-tab {padding:10px;} .yats .yats-service-tab small {display:none;} .yats .yats-service-tab b {font-size:12px;} .yats .yats-services {gap:6px;} }