:root{ --bg:#0b1020; --bg-2:#0f1630; --panel:#111a38; --panel-2:#172245; --text:#e7ecff; --muted:#97a3c7; --accent:#4cc2ff; --accent-2:#7ef0c7; --danger:#ff6b7a; --ok:#5ad48b; --border:#25305a; --shadow:0 10px 30px rgba(0,0,0,.35); --radius:14px; } /* Light theme overrides (applied via data-theme="light" on ) */ html[data-theme="light"]{ --bg:#f4f6fb; --bg-2:#eaeef7; --panel:#ffffff; --panel-2:#f7f9ff; --text:#1a2040; --muted:#5a6487; --accent:#0b78d3; --accent-2:#18a373; --danger:#d13241; --ok:#1f9b5a; --border:#cbd5e8; --shadow:0 8px 24px rgba(40,60,120,.12); } html[data-theme="light"] body{background:var(--bg);color:var(--text)} html[data-theme="light"] .site-header{background:rgba(255,255,255,.9);border-bottom:1px solid var(--border)} html[data-theme="light"] .main-nav a{color:#4a5577} html[data-theme="light"] .main-nav a:hover{color:var(--text)} html[data-theme="light"] .brand{color:var(--text)} html[data-theme="light"] .card{background:var(--panel);border-color:var(--border);color:var(--text)} html[data-theme="light"] .card p{color:var(--muted)} html[data-theme="light"] .form-row input,html[data-theme="light"] .form-row select,html[data-theme="light"] .form-row textarea{background:#fff;border-color:var(--border);color:var(--text)} html[data-theme="light"] .form-row label{color:#374060} html[data-theme="light"] table.data{background:var(--panel);border-color:var(--border)} html[data-theme="light"] table.data th{background:#e6ecfa;color:#374060} html[data-theme="light"] table.data td{border-bottom-color:var(--border)} html[data-theme="light"] .alert.ok{background:rgba(31,155,90,.12);border-color:rgba(31,155,90,.35);color:#0d6d3d} html[data-theme="light"] .alert.err{background:rgba(209,50,65,.1);border-color:rgba(209,50,65,.35);color:#8a1a28} html[data-theme="light"] .hero{background:radial-gradient(circle at 20% 10%,#cfe0ff 0%,transparent 60%),radial-gradient(circle at 80% 30%,#d6f0e8 0%,transparent 60%),#f4f6fb} html[data-theme="light"] code.inline{background:#eef2fa;border-color:var(--border);color:#334} html[data-theme="light"] kbd{background:#eef2fa;color:#374060} html[data-theme="light"] .site-footer{border-top-color:var(--border)} /* Editor: keep the canvas area darker for contrast even in light mode */ html[data-theme="light"] .editor{background:#f4f6fb;color:var(--text)} html[data-theme="light"] .editor .ribbon-tabs{background:#e2e8f5} html[data-theme="light"] .editor .ribbon-content{background:var(--panel);border-bottom-color:var(--border)} html[data-theme="light"] .editor .ribbon-tab{color:var(--muted)} html[data-theme="light"] .editor .ribbon-tab.active{background:var(--panel);color:var(--accent);border-color:var(--border)} html[data-theme="light"] .editor .leftbar{background:var(--panel);border-right-color:var(--border)} html[data-theme="light"] .editor .leftbar button[data-tool]{color:var(--muted)} html[data-theme="light"] .editor .leftbar button[data-tool]:hover{background:#dbe6fa;color:var(--text)} html[data-theme="light"] .editor .leftbar button[data-tool].active{background:#cfe0ff;color:var(--accent)} html[data-theme="light"] .editor .leftbar button[data-toggle]{background:#f7f9ff;border-color:var(--border);color:#5a6487} html[data-theme="light"] .editor .leftbar button[data-toggle].on{background:#d4f7e5;color:#0d6d3d;border-color:#5cc795} html[data-theme="light"] .editor .sidebar{background:var(--panel);border-left-color:var(--border)} html[data-theme="light"] .editor .sidebar .panel{background:#f7f9ff;border-color:var(--border)} html[data-theme="light"] .editor .rbtn .lbl{color:#374060} html[data-theme="light"] .editor .rbtn:hover{background:#dbe6fa} html[data-theme="light"] .editor .rsbtn{color:#374060} html[data-theme="light"] .editor .rsbtn:hover{background:#dbe6fa} html[data-theme="light"] .editor .commandbar{background:#e2e8f5;border-top-color:var(--border)} html[data-theme="light"] .editor .commandbar input{background:#fff;color:#1a2040;border-color:var(--border)} html[data-theme="light"] .editor .statusbar{background:var(--panel);color:var(--muted)} html[data-theme="light"] .editor .statusbar .pill{background:#e6ecfa;color:#374060} /* Canvas σκούρο background παραμένει για να ξεχωρίζουν οι γραμμές */ *{box-sizing:border-box} html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,"Noto Sans",sans-serif;font-size:15px;line-height:1.55} a{color:var(--accent);text-decoration:none} a:hover{color:#9adcff} .wrap{max-width:1180px;margin:0 auto;padding:0 20px} .site-main{min-height:calc(100vh - 160px)} /* header */ .site-header{position:sticky;top:0;z-index:50;background:rgba(11,16,32,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)} .site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px} .brand{font-size:20px;color:var(--text)} .brand .logo{color:var(--accent);font-size:24px;margin-right:4px} .main-nav{display:flex;gap:18px;align-items:center} .main-nav a{color:var(--muted);font-weight:500} .main-nav a:hover{color:var(--text)} /* buttons */ .btn{display:inline-block;padding:10px 18px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#3aa2ff);color:#04121f !important;font-weight:600;border:0;cursor:pointer;transition:transform .1s ease} .btn:hover{transform:translateY(-1px)} .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text) !important} .btn-danger{background:linear-gradient(135deg,#ff6b7a,#ff3b5c);color:#fff !important} .btn-lg{padding:14px 26px;font-size:16px} .btn-sm{padding:6px 12px;font-size:13px} /* hero */ .hero{position:relative;padding:90px 0 70px;overflow:hidden;background:radial-gradient(circle at 20% 10%,#1a2a66 0%,transparent 60%),radial-gradient(circle at 80% 30%,#103a4a 0%,transparent 60%),var(--bg)} .hero h1{font-size:52px;line-height:1.05;margin:0 0 20px;letter-spacing:-.02em} .hero h1 span{background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent} .hero p.lead{font-size:18px;color:var(--muted);max-width:640px;margin:0 0 30px} .hero .cta{display:flex;gap:14px;flex-wrap:wrap} .hero .decor{position:absolute;right:-40px;top:40px;width:560px;height:420px;opacity:.35;pointer-events:none;background: linear-gradient(transparent 49%,rgba(124,200,255,.35) 50%,transparent 51%) 0 0/40px 40px, linear-gradient(90deg,transparent 49%,rgba(124,200,255,.35) 50%,transparent 51%) 0 0/40px 40px; mask-image:radial-gradient(circle at 60% 40%,#000 40%,transparent 75%)} /* sections */ section.block{padding:70px 0;border-top:1px solid var(--border)} section.block h2{font-size:34px;margin:0 0 10px} section.block .sub{color:var(--muted);margin-bottom:34px} .grid{display:grid;gap:18px} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-4{grid-template-columns:repeat(4,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)} @media (max-width:900px){.grid.cols-3,.grid.cols-4,.grid.cols-2{grid-template-columns:1fr}.hero h1{font-size:36px}} .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow)} .card h3{margin:0 0 8px;font-size:18px} .card p{color:var(--muted);margin:0} .card .icon{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,#12305a,#1b4a82);display:grid;place-items:center;font-size:22px;margin-bottom:12px} /* plan card */ .plan{display:flex;flex-direction:column;gap:12px} .plan .price{font-size:34px;font-weight:700} .plan .price small{font-size:14px;color:var(--muted);font-weight:500} .plan ul{margin:10px 0 14px;padding-left:18px;color:var(--muted)} .plan ul li{margin:4px 0} .plan.featured{border-color:var(--accent);box-shadow:0 0 0 2px rgba(76,194,255,.25),var(--shadow)} /* forms */ form.card{max-width:520px;margin:40px auto} .form-row{margin-bottom:14px} .form-row label{display:block;font-weight:600;margin-bottom:6px;color:#d4ddff} .form-row input,.form-row select,.form-row textarea{width:100%;padding:11px 13px;border-radius:10px;background:#0b1330;color:var(--text);border:1px solid var(--border);font-size:15px;font-family:inherit} .form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:0;border-color:var(--accent)} .form-row .hint{color:var(--muted);font-size:12px;margin-top:4px} .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* alerts */ .alert{padding:12px 16px;border-radius:10px;margin:18px 0} .alert.ok{background:rgba(90,212,139,.15);border:1px solid rgba(90,212,139,.35);color:#b8f0d0} .alert.err{background:rgba(255,107,122,.15);border:1px solid rgba(255,107,122,.35);color:#ffc8ce} /* dashboard */ .page{padding:40px 0} .page h1{margin:0 0 6px;font-size:30px} .page .sub{color:var(--muted);margin-bottom:26px} .toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px} .file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px} .file-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column} .file-card .thumb{height:140px;background:repeating-linear-gradient(0deg,#0e1733,#0e1733 19px,#162150 20px),repeating-linear-gradient(90deg,#0e1733,#0e1733 19px,#162150 20px);position:relative} .file-card .thumb::after{content:'◬';position:absolute;inset:0;display:grid;place-items:center;font-size:42px;color:rgba(124,200,255,.4)} .file-card .meta{padding:12px 14px} .file-card h4{margin:0 0 4px;font-size:15px} .file-card .meta small{color:var(--muted)} .file-card .actions{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--border);background:#0c1430} /* table */ table.data{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden} table.data th,table.data td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:14px} table.data th{background:#132051;color:#cfd9ff;font-weight:600} table.data tr:last-child td{border-bottom:0} /* footer */ .site-footer{border-top:1px solid var(--border);padding:24px 0;color:var(--muted);font-size:13px} .site-footer .wrap{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap} .site-footer .links{display:flex;gap:16px} /* editor — AutoCAD-style ribbon layout */ body.editor-body{overflow:hidden} .editor{display:grid;grid-template-columns:46px 1fr 280px;grid-template-rows:30px 96px 1fr 36px 24px;height:100vh;background:#0a0f22;color:var(--text)} .editor.ribbon-collapsed{grid-template-rows:30px 0 1fr 36px 24px} .editor.ribbon-collapsed .ribbon-content{display:none} /* ---- Ribbon tab strip ---- */ .editor .ribbon-tabs{ grid-column:1/-1; background:#080f24; border-bottom:1px solid var(--border); display:flex; align-items:flex-end; gap:2px; padding:0 8px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:#25305a transparent; } .editor .ribbon-tabs::-webkit-scrollbar{height:4px} .editor .ribbon-tabs::-webkit-scrollbar-thumb{background:#25305a;border-radius:2px} .editor .ribbon-brand{ display:flex;align-items:center;gap:6px; color:#cfe0ff;font-weight:700;font-size:14px; padding:0 12px 0 4px;border-right:1px solid var(--border);margin-right:6px; flex-shrink:0;height:100%; } .editor .ribbon-brand .logo{color:var(--accent);font-size:18px} .editor .ribbon-brand input{ background:#0b1330;color:var(--text);border:1px solid var(--border); padding:3px 8px;border-radius:5px;font-family:inherit;font-size:12px;width:130px; } .editor .ribbon-tab{ padding:6px 16px 5px; background:transparent; color:var(--muted); border:1px solid transparent; border-bottom:none; border-radius:6px 6px 0 0; cursor:pointer; font-size:12px; font-family:inherit; letter-spacing:.03em; white-space:nowrap; flex-shrink:0; } .editor .ribbon-tab:hover{color:var(--text);background:rgba(21,34,86,.5)} .editor .ribbon-tab.active{ background:#0d1530; color:var(--accent); border-color:var(--border); margin-bottom:-1px; padding-bottom:6px; } .editor .ribbon-spacer{flex:1 1 auto} .editor .ribbon-right{ display:flex;align-items:center;gap:4px;flex-shrink:0;padding-right:4px;height:100%; } .editor .ribbon-right button{ background:transparent;color:var(--muted);border:1px solid transparent; padding:4px 10px;border-radius:5px;cursor:pointer;font-family:inherit;font-size:12px; } .editor .ribbon-right button:hover{background:#152256;color:var(--text);border-color:var(--border)} /* ---- Ribbon content (panels) ---- */ .editor .ribbon-content{ grid-column:1/-1; background:#0d1530; border-bottom:1px solid var(--border); padding:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:#25305a transparent; } .editor .ribbon-content::-webkit-scrollbar{height:6px} .editor .ribbon-content::-webkit-scrollbar-thumb{background:#25305a;border-radius:3px} .editor .ribbon-group{display:none;height:100%} .editor .ribbon-group.active{display:flex;align-items:stretch} .editor .ribbon-panel{ display:flex; flex-direction:column; padding:4px 6px 0; border-right:1px solid #1a2345; flex-shrink:0; min-width:50px; height:100%; } .editor .ribbon-panel:last-child{border-right:none} .editor .ribbon-panel-body{ flex:1 1 auto; display:flex; align-items:flex-start; gap:1px; padding:2px 2px 0; } .editor .ribbon-panel-label{ font-size:9px; text-transform:uppercase; color:#6d7aa3; text-align:center; padding:2px 4px 3px; letter-spacing:.08em; border-top:1px dotted #1a2345; margin-top:2px; } /* Big button (icon on top + label below) */ .editor .rbtn{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-width:44px; max-width:72px; padding:4px 6px 3px; background:transparent; border:1px solid transparent; border-radius:5px; color:var(--text); cursor:pointer; font-family:inherit; gap:3px; transition:background .1s ease; } .editor .rbtn:hover{background:#152256;border-color:var(--border)} .editor .rbtn:active{background:#1a2d66} .editor .rbtn .ico{font-size:22px;line-height:1;color:#cfe0ff} .editor .rbtn.accent .ico{color:var(--accent)} .editor .rbtn.topo .ico{color:var(--accent-2)} .editor .rbtn.warn .ico{color:#ffd36b} .editor .rbtn .lbl{font-size:10px;white-space:nowrap;color:#b8c3e6} /* Small button (inline, text-only or with tiny icon) */ .editor .rsbtn{ padding:4px 8px; background:transparent; border:1px solid transparent; border-radius:4px; color:#d4ddff; cursor:pointer; font-family:inherit; font-size:11px; text-align:left; white-space:nowrap; } .editor .rsbtn:hover{background:#152256;border-color:var(--border)} .editor .rsbtn .ico{display:inline-block;width:14px;margin-right:4px;color:var(--accent);text-align:center} /* Stack of 3 small buttons vertically */ .editor .rstack{ display:flex; flex-direction:column; gap:1px; justify-content:flex-start; padding-top:2px; } /* Property panel with inputs */ .editor .rpanel-form{display:flex;flex-direction:column;gap:3px;padding:2px 4px} .editor .rpanel-form label{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:4px} .editor .rpanel-form input[type=color]{width:26px;height:22px;padding:0;border-radius:4px;border:1px solid var(--border);background:#0b1330;cursor:pointer} .editor .rpanel-form input[type=number],.editor .rpanel-form input[type=text],.editor .rpanel-form select{ background:#0b1330;color:var(--text);border:1px solid var(--border);padding:3px 6px; border-radius:4px;font-size:11px;font-family:inherit;width:100px; } .editor .rpanel-form input[type=checkbox]{margin:0} .editor .rpanel-form input[type=file]{display:none} .editor .rsep{width:1px;background:#1a2345;margin:4px 2px;flex-shrink:0} .editor .leftbar{background:#0d1530;border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:stretch;padding:3px 2px;gap:2px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#25305a transparent} .editor .leftbar::-webkit-scrollbar{width:4px} .editor .leftbar::-webkit-scrollbar-thumb{background:#25305a;border-radius:2px} /* Tool buttons (top section) */ .editor .leftbar button[data-tool]{ height:34px;border-radius:6px;background:transparent;border:1px solid transparent; color:var(--muted);font-size:15px;cursor:pointer;flex-shrink:0;padding:0; display:flex;align-items:center;justify-content:center; } .editor .leftbar button[data-tool]:hover{background:#152256;color:var(--text)} .editor .leftbar button[data-tool].active{background:#1a2d66;border-color:var(--accent);color:var(--accent)} /* Section separator */ .editor .leftbar .lb-sep{height:1px;background:#1a2345;margin:4px 4px;flex-shrink:0} .editor .leftbar .lb-section-title{ font-size:8px;color:#4d5d8a;text-transform:uppercase;text-align:center; letter-spacing:.1em;margin:4px 0 2px;flex-shrink:0; } /* Drawing aid toggles (Grid, Snap, Ortho, Osnap) — fat buttons with text */ .editor .leftbar button[data-toggle]{ height:28px;border-radius:5px;background:#0b1330;border:1px solid #1f2a58; color:#6d7aa3;font-size:10px;font-weight:700;letter-spacing:.08em; cursor:pointer;flex-shrink:0;padding:0; display:flex;align-items:center;justify-content:center; transition:background .12s ease, color .12s ease, border-color .12s ease; } .editor .leftbar button[data-toggle]:hover{background:#152256;color:#cfe0ff} .editor .leftbar button[data-toggle].on{ background:#0e3a2a;color:#7ef0c7;border-color:#3c9e76; box-shadow:inset 0 0 0 1px #0e3a2a, 0 0 6px rgba(126,240,199,.2); } /* Object snap flag toggles — smaller, with icon + label */ .editor .leftbar button[data-osnap]{ height:22px;border-radius:4px;background:transparent;border:1px solid transparent; color:#6d7aa3;font-size:9px;font-weight:600;letter-spacing:.04em; cursor:pointer;flex-shrink:0;padding:0 2px; display:flex;align-items:center;justify-content:center; } .editor .leftbar button[data-osnap]:hover{background:#152256;color:#cfe0ff} .editor .leftbar button[data-osnap].on{ color:#ffd36b;border-color:#8a6a26;background:#2a1f08; } /* Current layer swatch at bottom */ .editor .leftbar .lb-layer{ margin-top:auto;flex-shrink:0;padding:5px 2px 3px; border-top:1px solid #1a2345;display:flex;flex-direction:column;align-items:center;gap:2px; } .editor .leftbar .lb-layer .lb-layer-sw{ width:26px;height:14px;border-radius:3px;border:1px solid #3b4870; cursor:pointer; } .editor .leftbar .lb-layer .lb-layer-name{ font-size:8px;color:#9fb4ff;max-width:38px;text-align:center; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; letter-spacing:.02em; } .editor .canvas-wrap{position:relative;overflow:hidden;background:#0a0f22} .editor canvas{display:block;width:100%;height:100%;cursor:crosshair} .editor .sidebar{background:#0d1530;border-left:1px solid var(--border);overflow-y:auto;overflow-x:hidden;padding:8px;scrollbar-width:thin;scrollbar-color:#25305a transparent} .editor .sidebar::-webkit-scrollbar{width:6px} .editor .sidebar::-webkit-scrollbar-thumb{background:#25305a;border-radius:3px} .editor .sidebar h4{margin:8px 4px 4px;color:#9fb4ff;font-size:11px;text-transform:uppercase;letter-spacing:.08em} .editor .sidebar .panel{background:#0b1330;border:1px solid var(--border);border-radius:8px;padding:8px;margin-bottom:8px;font-size:12px} .editor .sidebar .form-row{margin-bottom:8px} .editor .sidebar .form-row label{font-size:11px;margin-bottom:3px} .editor .sidebar .form-row input,.editor .sidebar .form-row select{padding:5px 8px;font-size:12px} .editor .sidebar .panel .hint{font-size:10px} .editor .sidebar .layer-item{display:flex;align-items:center;gap:8px;padding:6px 4px;border-bottom:1px dashed #1f2a58} .editor .sidebar .layer-item:last-child{border-bottom:0} .editor .sidebar .layer-item .sw{width:14px;height:14px;border-radius:3px;cursor:pointer;border:1px solid #233064} .editor .commandbar{grid-column:1/-1;background:#0b1433;border-top:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 10px;font-family:ui-monospace,Menlo,monospace;font-size:12px;min-width:0;overflow:hidden} .editor .commandbar .label{color:#ffd36b;font-weight:700;letter-spacing:.04em;flex-shrink:0} .editor .commandbar .prompt{color:#ffd36b;flex:0 1 auto;min-width:0;max-width:220px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .editor .commandbar .echo{color:#7ef0c7;flex:0 1 auto;min-width:0;max-width:280px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} .editor .commandbar input{flex:1 1 200px;min-width:120px;background:#050a1e;color:#e7ecff;border:1px solid #2a3a80;padding:5px 10px;border-radius:6px;font-family:inherit;font-size:12px;outline:none} .editor .commandbar input:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(76,194,255,.18)} .editor .commandbar .hintbtn{background:transparent;border:1px solid var(--border);color:var(--muted);padding:4px 9px;border-radius:6px;font-size:12px;cursor:pointer;font-family:inherit} .editor .commandbar .hintbtn:hover{background:#152256;color:var(--text)} .editor .statusbar{grid-column:1/-1;background:#0d1530;border-top:1px solid var(--border);display:flex;align-items:center;gap:18px;padding:0 12px;font-size:12px;color:var(--muted)} .editor .statusbar .pill{padding:2px 8px;background:#111e45;border-radius:10px;color:#cfe0ff} /* modal */ .modal-back{position:fixed;inset:0;background:rgba(3,7,22,.7);display:none;z-index:100;align-items:center;justify-content:center} .modal-back.on{display:flex} .modal{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;min-width:360px;max-width:90vw;max-height:85vh;overflow:auto;box-shadow:var(--shadow)} .modal h3{margin:0 0 10px} .modal .close{float:right;background:none;border:0;color:var(--muted);font-size:20px;cursor:pointer} /* small */ .muted{color:var(--muted)} .right{text-align:right} hr.sep{border:0;border-top:1px solid var(--border);margin:20px 0} code.inline{background:#0b1330;border:1px solid var(--border);padding:2px 6px;border-radius:6px;font-size:12px} kbd{background:#0b1330;border:1px solid var(--border);border-bottom-width:2px;padding:1px 6px;border-radius:4px;font-size:10px;font-family:ui-monospace,Menlo,monospace;color:#cfe0ff} /* ===================================================== Orientation warning overlay (mobile portrait) Shows automatically when: viewport portrait AND width <= 900px. Hidden when user taps "Συνέχεια έτσι" via .dismissed class. ===================================================== */ .orient-warn{ position:fixed;inset:0;z-index:9999; background:radial-gradient(circle at 30% 20%,#1a2a66 0%,#0b1020 60%,#06091a 100%); display:none; align-items:center;justify-content:center; padding:24px; animation:orientFade .35s ease-out; } @keyframes orientFade{from{opacity:0}to{opacity:1}} .orient-warn-box{ max-width:380px;text-align:center;color:var(--text); background:rgba(13,21,48,.7);backdrop-filter:blur(10px); border:1px solid var(--border);border-radius:16px; padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.5); } .orient-warn-box h2{ margin:14px 0 10px;font-size:22px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text;background-clip:text;color:transparent; } .orient-warn-box p{color:#b8c3e6;font-size:14px;line-height:1.55;margin:0 0 16px} .orient-warn-box .btn{margin-top:4px} .orient-icon{display:flex;justify-content:center} .orient-icon svg{animation:orientRotate 2.2s ease-in-out infinite} @keyframes orientRotate{ 0%, 30% { transform:rotate(0deg); } 55%, 85% { transform:rotate(-90deg); } 100% { transform:rotate(-90deg); } } /* Show on narrow portrait, hide in landscape or when dismissed */ @media (max-width: 900px) and (orientation: portrait){ .orient-warn:not(.dismissed){display:flex} body.editor-body{overflow:hidden} } /* ===================================================== Responsive breakpoints for the editor - Desktop >= 1280px : full layout (280px sidebar) - Laptop 960-1280 : narrower sidebar (240px) - Tablet 640-960 : sidebar hidden by default, toggle via ☰ - Mobile <640px : compact leftbar, smallest fonts ===================================================== */ /* Sidebar toggle state (manual hide) */ .editor.no-sidebar{grid-template-columns:46px 1fr 0 !important} .editor.no-sidebar .sidebar{display:none} @media (max-width: 1280px){ .editor{grid-template-columns:46px 1fr 248px} .editor .sidebar{padding:7px} .editor .sidebar .panel{padding:7px;margin-bottom:7px;font-size:11px} } @media (max-width: 1180px){ .editor .ribbon-panel{padding:3px 4px 0;min-width:44px} .editor .rbtn{min-width:40px;padding:3px 4px} .editor .rbtn .ico{font-size:20px} .editor .rbtn .lbl{font-size:9px} } @media (max-width: 960px){ /* Sidebar hidden by default, overlay when opened */ .editor{grid-template-columns:44px 1fr 0;grid-template-rows:28px 88px 1fr 36px 24px} .editor .sidebar{ display:none; position:fixed; right:0; top:116px; bottom:60px; width:270px; z-index:30; box-shadow:-10px 0 30px rgba(0,0,0,.5); } .editor.force-sidebar .sidebar{display:block} .editor .leftbar button{width:34px;height:32px;font-size:14px} .editor .ribbon-brand input{width:100px;font-size:11px} .editor .rbtn{min-width:38px;padding:2px 4px} .editor .rbtn .ico{font-size:18px} .editor .rbtn .lbl{font-size:9px} .editor .commandbar .prompt{max-width:140px} .editor .commandbar .echo{max-width:160px} } @media (max-width: 640px){ /* Collapse ribbon to tab-only mode on mobile */ .editor{grid-template-columns:38px 1fr 0;grid-template-rows:28px 0 1fr 34px 22px} .editor .ribbon-content{display:none} .editor .ribbon-brand{padding:0 6px 0 2px;border-right:none;margin-right:0} .editor .ribbon-brand input{width:80px} .editor .ribbon-brand .logo{font-size:16px} .editor .ribbon-tab{padding:5px 10px 4px;font-size:11px} .editor .leftbar{padding:3px 0;gap:2px} .editor .leftbar button{width:30px;height:28px;font-size:13px} .editor .sidebar{top:28px;width:88vw;right:0} .editor .commandbar{padding:0 8px;gap:6px} .editor .commandbar .label{display:none} .editor .commandbar .prompt,.editor .commandbar .echo{display:none} .editor .commandbar input{font-size:12px} .editor .statusbar{padding:0 8px;gap:10px;font-size:10px} .editor .statusbar #savedState{display:none} .editor .statusbar span:last-child{display:none} }