@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{
  --bg:#fbf5ea;--paper:#fffdf8;--soft:#f5ead9;--ink:#2d2116;--muted:#786b5d;--gold:#b88735;--green:#16865a;--red:#c94e42;--line:#eadac4;
  --shadow:0 14px 40px rgb(75 48 23 / .08)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--ink);font-family:Manrope,"IBM Plex Sans Arabic",sans-serif;background:linear-gradient(180deg,#fff9ef,var(--bg));overflow-x:hidden}
.ambient{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at top right,rgb(184 135 53 / .16),transparent 28rem),radial-gradient(circle at 10% 20%,rgb(22 134 90 / .08),transparent 24rem)}
.mashrabiya{display:none}
main{position:relative;width:min(1360px,calc(100% - 32px));margin:auto;padding:24px 0 70px;z-index:1}
.hidden{display:none!important}
.login-gateway{min-height:calc(100vh - 48px);display:grid;grid-template-columns:minmax(320px,560px) 1fr;gap:18px;align-items:stretch}
.arch-card,.atelier-story,.card,.masthead,.metric,.section-drawer{background:rgb(255 253 248 / .94);border:1px solid var(--line);box-shadow:var(--shadow)}
.arch-card{min-height:620px;padding:34px;border-radius:28px;display:flex;flex-direction:column;justify-content:center}
.language-row{display:flex;justify-content:flex-end;margin-bottom:auto}
.brand-seal{width:72px;height:72px;border-radius:22px;display:grid;place-items:center;margin:22px 0 16px;color:#fff;background:linear-gradient(135deg,#c99a4d,var(--gold));box-shadow:0 12px 28px rgb(184 135 53 / .22)}
.brand-seal span{font:800 34px "IBM Plex Sans Arabic",sans-serif}
.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--gold);font-weight:800;text-transform:uppercase;margin:0 0 8px}
.arch-card h1,.masthead h1{font-size:clamp(38px,5.2vw,70px);line-height:1;letter-spacing:-.055em;margin:8px 0 16px;color:#24180d}
.arch-card p,.atelier-story p,.masthead-note{color:var(--muted);line-height:1.75;font-size:17px;max-width:720px}
.arch-card form{display:grid;gap:12px;margin-top:28px}
input,select,button{border:1px solid var(--line);border-radius:16px;background:#fffaf2;color:var(--ink);padding:14px 16px;font:inherit;outline:none}
input:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgb(184 135 53 / .14)}
button{background:var(--gold);color:#fff;border:0;font-weight:800;cursor:pointer;transition:.15s ease}
button:hover{transform:translateY(-1px);filter:saturate(1.05)}
button.secondary{background:#fffaf2;color:var(--ink);border:1px solid var(--line)}
small{color:var(--red)}
.atelier-story{border-radius:28px;padding:32px;display:flex;flex-direction:column;justify-content:flex-end;min-height:620px;background:linear-gradient(180deg,rgb(255 253 248 / .7),#fffdf8),radial-gradient(circle at top right,rgb(184 135 53 / .16),transparent 22rem)}
.atelier-story h2{font-size:clamp(30px,4vw,56px);line-height:1.04;letter-spacing:-.055em;max-width:680px;margin:10px 0 26px;color:#2a1d12}
.story-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.story-strip span{border:1px solid var(--line);border-radius:999px;padding:10px 12px;color:var(--muted);font-size:12px;text-align:center;background:#fff8ec}
.masthead{border-radius:28px;padding:24px 26px;margin:14px 0 14px;display:flex;align-items:flex-end;justify-content:space-between;gap:22px}
.masthead-copy{max-width:780px}.header-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#user-pill,.pill{border:1px solid var(--line);background:#fff8ec;border-radius:999px;padding:9px 13px;color:var(--muted);font-size:12px;white-space:nowrap}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.metric{border-radius:22px;padding:18px;min-height:96px;background:linear-gradient(145deg,#fffdf8,#fff7ec)}
.metric span{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;margin-top:8px;font-size:30px;letter-spacing:-.03em;color:#25190f}
.daily-focus{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.daily-focus div{background:#fff8ec;border:1px solid var(--line);border-radius:18px;padding:14px 16px;color:#5b4938;font-weight:800}
.search-card{margin-top:14px}.search-card form{margin-bottom:10px}
.grid{display:grid;gap:14px;margin-top:14px}.two{grid-template-columns:1fr 1fr}.three{grid-template-columns:repeat(3,1fr)}
.card{border-radius:24px;padding:20px}
.card-head{display:flex;justify-content:space-between;gap:16px;align-items:start}.card h2{font-size:24px;letter-spacing:-.035em;margin:0 0 14px;line-height:1.12;color:#291c11}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.inline-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:10px}.inline-form button{grid-column:1/-1}.form-grid button,.check{grid-column:1/-1}.check{color:var(--muted);display:flex;align-items:center;gap:9px}
.kanban{display:grid;grid-template-columns:repeat(4,minmax(160px,1fr));gap:9px;overflow:auto;padding-bottom:4px}
.lane{background:#fffaf2;border:1px solid var(--line);border-radius:18px;padding:11px;min-height:280px}
.lane h3{font-size:14px;margin:0 0 10px;color:#6d4a20}
.ticket{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px;margin-bottom:9px}
.ticket strong{display:flex;justify-content:space-between;gap:8px;color:#2f2116}.ticket p{color:var(--muted);font-size:12px;line-height:1.5}.ticket .actions{display:flex;gap:6px;flex-wrap:wrap}.ticket button{font-size:11px;padding:8px 10px;border-radius:999px}
.list{display:grid;gap:9px}.row{border:1px solid var(--line);background:#fffaf2;border-radius:16px;padding:12px}
.row strong{display:flex;justify-content:space-between;gap:10px;color:#2d2116}.row small,.row p{color:var(--muted);line-height:1.55}.row .actions,.row button{margin-top:8px}
.bad{color:var(--red)!important}.good{color:var(--green)!important}.warn{color:var(--gold)!important}.invoice-code{font-family:"IBM Plex Sans Arabic",monospace;word-break:break-all;color:var(--gold)}
.section-drawer{border-radius:24px;margin-top:14px;overflow:hidden}
.section-drawer summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;justify-content:space-between;gap:16px;align-items:center}
.section-drawer summary::-webkit-details-marker{display:none}
.section-drawer summary span{font-size:20px;font-weight:800;color:#291c11}
.section-drawer summary small{color:var(--muted)}
.section-drawer summary:after{content:"+";width:28px;height:28px;border-radius:50%;background:#fff8ec;display:grid;place-items:center;color:var(--gold);font-weight:800;flex:0 0 auto}
.section-drawer[open] summary:after{content:"−"}
.section-drawer .grid{padding:0 14px 14px;margin-top:0}
html[dir=rtl] body{font-family:"IBM Plex Sans Arabic",Manrope,sans-serif;letter-spacing:0}
html[dir=rtl] .arch-card h1,html[dir=rtl] .masthead h1,html[dir=rtl] .atelier-story h2,html[dir=rtl] .card h2{letter-spacing:-.025em;line-height:1.15}
html[dir=rtl] .eyebrow{letter-spacing:.035em}html[dir=rtl] input,html[dir=rtl] select{text-align:right}html[dir=rtl] .card-head,html[dir=rtl] .masthead,html[dir=rtl] .row strong,html[dir=rtl] .ticket strong{direction:rtl}html[dir=rtl] .language-row{justify-content:flex-start}html[dir=rtl] .header-actions{justify-content:flex-start}
@media(max-width:1100px){.login-gateway,.two,.three,.metrics,.daily-focus{grid-template-columns:1fr}.atelier-story{min-height:300px}.masthead{align-items:flex-start;flex-direction:column}.kanban{grid-template-columns:repeat(2,minmax(220px,1fr))}.form-grid{grid-template-columns:1fr}}
@media(max-width:620px){main{width:min(100% - 18px,1360px);padding-top:10px}.arch-card,.atelier-story,.masthead,.card{border-radius:20px;padding:18px}.arch-card{min-height:auto}.atelier-story{display:none}.arch-card h1{font-size:36px}.kanban{grid-template-columns:1fr}.story-strip,.login form,.inline-form{display:grid}.metric{min-height:86px}.metric strong{font-size:26px}.section-drawer summary{align-items:flex-start;flex-direction:column}}
