@import url("./fonts/fonts.css");
/* Preview chrome: the product remains inside its real layout viewport. */
:root{font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;color:#203d38;background:#f5f6f3;font-size:15px;color-scheme:light;--line:#dbe2dc;--teal:#115e59;--muted:#5c7269;--morph:cubic-bezier(.77,0,.175,1)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select,input{border:1px solid #c5d2ca;border-radius:8px;padding:.65rem .85rem;background:#fff;color:#173e37;min-height:44px}button{cursor:pointer}button.primary{background:var(--teal);color:#fff;border-color:var(--teal)}button.danger{color:#942c36}button:hover{border-color:#287e6c}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #997014;outline-offset:3px}button.quiet{border-color:transparent;background:transparent}svg{width:20px;height:20px;flex-shrink:0}h1,h2,p{margin:0}p{line-height:1.8}
.preview-header{min-height:68px;background:#fff;border-bottom:1px solid var(--line);padding:10px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-size:1.25rem;letter-spacing:.055em;font-weight:bold;display:flex;align-items:center;gap:14px}.brand small{letter-spacing:0;font-weight:normal;font-size:.85rem;border-inline-start:1px solid var(--line);padding-inline-start:14px;color:var(--muted)}
.synthetic{display:flex;align-items:center;gap:8px;color:#735a28;font-size:.8rem}.status-dot{width:6px;height:6px;border-radius:50%;background:#9e7423}.top-right{display:flex;align-items:center;gap:20px}.top-right button{display:flex;align-items:center;gap:9px;font-size:.85rem}
.layout{display:grid;grid-template-columns:246px minmax(0,1fr);min-height:calc(100vh - 68px)}aside{background:#fcfcf9;border-inline-end:1px solid var(--line);padding:24px 20px;display:flex;flex-direction:column;gap:22px}.eyebrow{font-size:.76rem;font-weight:bold;letter-spacing:.04em;color:#54766b}aside h1{font-size:1.25rem;margin:10px 0}aside p{font-size:.86rem;color:#526a60}.line{border-top:1px solid var(--line);padding-top:18px}.control{display:flex;flex-direction:column;gap:7px}.control span{font-size:.8rem;font-weight:bold}.control input,.control select{width:100%;min-width:0}.stack{display:flex;flex-direction:column;gap:12px}.person{border-inline-start:2px solid #b18d4a;padding:10px 12px;background:#f1f5ef}.person strong{display:block;margin-bottom:6px}.muted{color:var(--muted);font-size:.85rem}
.stage-shell{min-width:0;padding:18px}.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 2px 4px #183c3004}.context-controls,.display-controls{display:flex;align-items:center;gap:8px;min-width:0}.context-controls{flex:1 1 410px}.display-controls{flex:0 1 auto}.toolbar-control{display:flex;align-items:center;gap:8px;min-width:0;padding-inline:10px 0;color:var(--muted);border:1px solid transparent;border-radius:8px}.toolbar-control:focus-within{border-color:#b3c9be}.toolbar-control select{border-color:transparent;background:transparent;padding-block:10px;padding-inline:0 6px;min-width:0;width:100%;font-size:.84rem}.context-controls .toolbar-control{flex:1;max-width:270px}.context-controls .toolbar-control+.toolbar-control{border-inline-start-color:var(--line)}.display-controls .toolbar-control{max-width:122px}.display-controls .toolbar-control svg{width:17px}
.device-switch{display:flex;gap:2px;padding:3px;background:#eef2ee;border:1px solid #e0e7e0;border-radius:10px}.device-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:44px;min-height:44px;padding:3px 7px;border:1px solid transparent;border-radius:7px;background:transparent;color:#577064}.device-toggle svg{width:18px;height:18px}.device-toggle span{font-size:10px;line-height:1.1;font-variant-numeric:tabular-nums}.device-toggle[aria-pressed=true]{background:#fff;color:var(--teal);border-color:#c2d2c7;box-shadow:0 1px 3px #183c3014}.device-toggle:hover{background:#ffffffa8}.device-toggle[aria-pressed=true]:hover{background:#fff}.fit-control{display:flex;align-items:center;justify-content:center;gap:6px;border-color:transparent;background:transparent;min-width:76px;padding:8px;font-size:.78rem}.fit-control svg{width:16px;height:16px}.fit-control[aria-pressed=true]{color:var(--teal)}
.frame-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 4px 12px;color:#5b7066;font-size:.76rem}.viewport-readout{display:flex;align-items:center;gap:12px}#dimensions{font-variant-numeric:tabular-nums;letter-spacing:.02em;color:#354f43}.viewport-scroll{overflow:auto;max-width:100%;border:1px solid #d4ded4;border-radius:14px;background-color:#e9eee7;background-image:radial-gradient(#bdcaba70 .6px,transparent .6px);background-size:10px 10px;padding:20px;direction:ltr;min-height:360px;overscroll-behavior-x:contain}.frame-holder{margin:auto;position:relative;border-radius:6px;box-shadow:0 6px 24px #234c3914;overflow:hidden;transition-property:width,height;transition-duration:0s;transition-timing-function:var(--morph)}.viewport-scroll iframe{transform-origin:top left;position:absolute;left:0;top:0;display:block;border:0;background:white;max-width:none;transition-property:width,height,transform;transition-duration:0s;transition-timing-function:var(--morph)}.frame-holder.morph,.frame-holder.morph iframe{transition-duration:240ms}
.placeholder{direction:rtl;display:grid;place-items:center;min-height:440px;padding:30px;color:#4c695c;text-align:center}.placeholder h2{margin-bottom:12px}.login{max-width:500px;margin:12vh auto;background:#fff;border:1px solid #cad8cc;border-radius:16px;padding:32px}.login h1{margin:18px 0;font-size:1.5rem}.login p{margin-bottom:20px;color:#557064}#notice:not(:empty){position:fixed;bottom:20px;right:20px;max-width:min(500px,calc(100vw - 40px));background:#fff7de;color:#62430d;border:1px solid #cbb36e;border-radius:9px;padding:14px 18px;box-shadow:0 8px 30px #20302022;z-index:100}dialog{border:1px solid #aebfac;border-radius:12px;padding:25px;max-width:min(540px,calc(100vw - 30px));line-height:1.8;color:#173e37}dialog::backdrop{background:#152e286b}dialog h2{font-size:1.25rem;margin-bottom:10px}.dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.skip{position:fixed;top:-80px;z-index:200;background:#fff;padding:16px}.skip:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}details{font-size:.8rem;line-height:1.7}details code{overflow-wrap:anywhere}summary{cursor:pointer}details p{margin-top:10px}
@media(prefers-reduced-motion:reduce){.frame-holder.morph,.frame-holder.morph iframe{transition-duration:0s}}
@media(max-width:1180px){.layout{grid-template-columns:220px minmax(0,1fr)}.context-controls{flex-basis:100%}.context-controls .toolbar-control{max-width:none}.display-controls{justify-content:center;width:100%}.stage-shell{padding:14px}}
@media(max-width:680px){.preview-header{padding:10px 14px;gap:10px}.brand{gap:8px}.brand small{padding-inline-start:8px;font-size:.75rem}.top-right{gap:8px}.top-right button{font-size:0;gap:0;padding:10px}.synthetic{max-width:118px;line-height:1.6;font-size:.7rem}.layout{display:block}aside{border-inline-end:0;border-bottom:1px solid var(--line);padding:18px}.stage-shell{padding:10px}.toolbar{gap:6px;padding:6px}.context-controls{flex-wrap:wrap;gap:4px}.context-controls .toolbar-control{flex-basis:100%;border-inline-start-color:transparent!important}.display-controls{flex-wrap:wrap;justify-content:space-between;gap:4px}.device-switch{order:0;width:100%;justify-content:space-between}.device-toggle{flex:1}.fit-control{order:2}.display-controls .toolbar-control{order:1;max-width:160px}.viewport-scroll{padding:10px}.frame-meta{flex-wrap:wrap;gap:6px}.viewport-readout{font-size:.72rem}.login{margin:5vh 15px}.preview-app-brand{min-width:0}}
.header-start{display:flex;align-items:center;gap:8px}.header-start button{display:grid;place-items:center;min-width:44px;padding:10px}.layout.sidebar-collapsed{grid-template-columns:minmax(0,1fr)}aside[hidden]{display:none}
@media(max-width:680px){.brand small{display:none}.header-start{gap:4px}.preview-header{gap:8px}}

/* Status belongs in the presenter flow so it cannot cover an action. */
#notice:not(:empty){position:static;inset:auto;max-width:none;margin-top:16px;box-sizing:border-box;overflow-wrap:anywhere}#notice:empty{display:none}