@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap');

:root { --ink:#ecf6f0; --muted:#9aa9a4; --line:rgba(228,246,237,.12); --panel:rgba(14,28,28,.78); --deep:#071413; --mint:#9df6ce; --aqua:#45c7c8; --orange:#ffb575; --danger:#ff8f7b; --shadow:0 24px 70px rgba(0,0,0,.28); }
* { box-sizing:border-box; } body { margin:0; min-width:320px; color:var(--ink); background:var(--deep); font-family:Outfit, sans-serif; } button,input,select { font:inherit; } button { cursor:pointer; } .ambient { position:fixed; width:42vw; height:42vw; border-radius:50%; filter:blur(100px); opacity:.15; pointer-events:none; } .ambient-one { background:#21d2ab; top:-18vw; left:-12vw; } .ambient-two { background:#df8b46; bottom:-24vw; right:-16vw; }
.shell { position:relative; max-width:1720px; margin:auto; padding:28px 42px 72px; } .topbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:42px; } .brand { display:flex; align-items:center; gap:11px; font-size:21px; font-weight:700; letter-spacing:-.7px; } .brand-mark { width:27px; height:27px; border:2px solid var(--mint); transform:rotate(45deg); border-radius:7px; position:relative; } .brand-mark:after { content:''; position:absolute; inset:6px; background:var(--mint); border-radius:2px; } .nav { display:flex; gap:7px; } .nav button,.ghost { border:0; color:var(--muted); background:transparent; padding:9px 12px; border-radius:9px; } .nav button.active,.nav button:hover { color:var(--ink); background:rgba(255,255,255,.07); } .profile-menu { position:relative; } .profile-toggle { display:flex; gap:10px; align-items:center; border:0; background:transparent; color:var(--mint); font-size:14px; padding:4px; border-radius:22px; } .profile-toggle:hover { background:rgba(255,255,255,.07); } .avatar { width:34px; height:34px; display:grid; place-items:center; background:linear-gradient(135deg,var(--aqua),#3872b8); border-radius:50%; color:#062020; font-weight:700; object-fit:cover; }.profile-dropdown { position:absolute; z-index:30; right:0; top:calc(100% + 10px); min-width:210px; padding:12px; border:1px solid var(--line); border-radius:10px; background:#102220; box-shadow:var(--shadow); display:none; }.profile-menu.open .profile-dropdown { display:grid; gap:9px; }.profile-dropdown small { color:var(--muted); overflow-wrap:anywhere; }.profile-dropdown a { color:var(--mint); text-decoration:none; font-weight:600; }
.eyebrow { color:var(--mint); font:500 11px 'DM Mono',monospace; letter-spacing:1.1px; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(33px,4vw,58px); line-height:.98; letter-spacing:-2.5px; max-width:690px; margin:12px 0 17px; } h2 { letter-spacing:-1px; font-size:24px; } .sub { color:var(--muted); line-height:1.55; max-width:600px; } .dashboard-hero { display:grid; grid-template-columns:1.45fr .85fr; gap:24px; margin-bottom:30px; } .card { background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); backdrop-filter:blur(14px); } .continue { padding:32px; overflow:hidden; position:relative; } .continue:after { content:''; width:280px; height:280px; position:absolute; right:-90px; bottom:-140px; background:radial-gradient(circle,var(--aqua),transparent 68%); opacity:.22; } .continue-actions { display:flex; align-items:center; gap:15px; margin-top:28px; }.btn { border:0; border-radius:10px; padding:11px 17px; font-weight:600; color:#09211d; background:var(--mint); box-shadow:0 9px 25px rgba(157,246,206,.17); transition:transform .2s,filter .2s; } .btn:hover { transform:translateY(-2px); filter:brightness(1.08); }.progress { height:7px; width:190px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }.progress i { display:block; height:100%; background:linear-gradient(90deg,var(--aqua),var(--mint)); border-radius:inherit; }.stats { padding:26px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }.stat { border:1px solid var(--line); padding:15px; border-radius:13px; background:rgba(0,0,0,.14); }.stat b { display:block; font-size:25px; margin-top:7px; }.stat span { color:var(--muted); font-size:13px; }.section-title { display:flex; justify-content:space-between; align-items:baseline; margin:34px 0 15px; }.course-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.course-card { min-height:185px; padding:20px; position:relative; overflow:hidden; }.course-card .mini-orb { position:absolute; width:130px;height:130px;right:-40px;bottom:-50px;border:1px solid var(--aqua);border-radius:50%; box-shadow:0 0 0 20px rgba(69,199,200,.07),0 0 0 42px rgba(69,199,200,.04); }.course-card h3 { font-size:19px; margin:22px 0 8px; }.course-card p { color:var(--muted); font-size:14px; }.skill-map { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }.skill-node { border:1px solid var(--line); border-radius:20px; padding:8px 12px; font-size:13px; color:var(--muted); }.skill-node.active { border-color:var(--mint); color:var(--mint); background:rgba(157,246,206,.08); }
.player-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:25px; }.mode-switch { display:flex; background:rgba(255,255,255,.06); padding:4px; border-radius:11px; flex-wrap:wrap; }.mode-switch button { border:0; padding:9px 11px; background:transparent; color:var(--muted); border-radius:8px; font-size:13px; }.mode-switch button.active { color:#09211d; background:var(--mint); font-weight:700; }.player { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:20px; }.sim-frame { overflow:hidden; min-height:760px; position:relative; }.erp { display:grid; grid-template-columns:170px minmax(0,1fr); min-height:610px; background:#f5f8f7; color:#162421; }.erp-side { background:#132624; padding:22px 13px; }.erp-logo { font-weight:700;color:#b7f8d9;margin:0 8px 28px; }.erp-nav button { width:100%; text-align:left; margin:3px 0; border:0; background:transparent; color:#a9bbb4; border-radius:8px; padding:10px; }.erp-nav button:hover,.erp-nav button.selected { background:#28453f; color:#fff; }.erp-main { padding:30px; }.erp-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:25px; }.erp-kicker { color:#6c7d79;font:11px 'DM Mono',monospace;text-transform:uppercase; }.erp h2 { margin:5px 0 0;color:#172522; }.erp-action { background:#136c59;color:white;border:0;border-radius:8px;padding:10px 13px;font-weight:600; }.empty { margin-top:72px; padding:36px; background:white; border:1px dashed #bfccc8;border-radius:13px; color:#667773; text-align:center; }.form-card { background:#fff; padding:24px; border:1px solid #dce5e2; border-radius:13px; box-shadow:0 10px 25px rgba(20,40,34,.05); }.form-grid { display:grid;grid-template-columns:1fr 1fr;gap:17px; }.field { display:grid;gap:7px; font-size:13px; font-weight:600; }.field input,.field select { width:100%; padding:10px;border:1px solid #b8c7c1;border-radius:7px;color:#18322b;background:#fff; }.field input:focus,.field select:focus { outline:3px solid rgba(59,185,149,.22);border-color:#1a9779; }.form-footer { display:flex;justify-content:space-between;margin-top:24px;padding-top:18px;border-top:1px solid #e4ebe8; }.form-footer button { border:0;border-radius:7px;padding:10px 14px; }.save { background:#136c59;color:white; }.cancel { color:#4e625b;background:#eef2f0; }
.jamis-shell { min-height:610px; background:linear-gradient(180deg,#eef3f8,#dae4ef); color:#1b2b3d; }.jamis-browser { display:flex; align-items:center; gap:14px; padding:18px 22px; background:#213349; color:#f4f8fc; border-bottom:1px solid rgba(255,255,255,.08); }.browser-dots { display:flex; gap:7px; }.browser-dots i { width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.28); display:block; }.browser-url { flex:1; min-width:0; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.1); color:#d7e4f2; font:500 12px 'DM Mono',monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.browser-launch { color:#102236; background:#bfe3ff; border-radius:999px; padding:10px 14px; text-decoration:none; font-weight:700; }.jamis-stage { display:grid; grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr); gap:28px; padding:34px; min-height:552px; }.jamis-info { display:flex; flex-direction:column; justify-content:center; }.jamis-info h2 { margin:14px 0 10px; font-size:34px; color:#112136; }.jamis-info p { color:#56667a; line-height:1.6; }.tenant-card,.credential-card { padding:18px; border-radius:16px; background:rgba(255,255,255,.8); border:1px solid rgba(17,33,54,.12); box-shadow:0 20px 50px rgba(31,54,84,.08); }.tenant-card { margin-top:22px; }.credential-card { margin-top:14px; }.tenant-card span,.credential-card span { display:block; color:#607186; font-size:12px; text-transform:uppercase; letter-spacing:1px; }.tenant-card b,.credential-card b { display:block; margin-top:7px; color:#112136; font-size:19px; }.tenant-card small,.credential-card small { display:block; margin-top:6px; color:#607186; overflow-wrap:anywhere; }.jamis-panel { display:grid; place-items:center; }.signin-card { width:min(100%,430px); padding:34px; border-radius:24px; background:#fff; border:1px solid rgba(17,33,54,.09); box-shadow:0 28px 80px rgba(31,54,84,.14); }.signin-brand { display:inline-flex; padding:8px 12px; border-radius:999px; background:#e8f2fd; color:#1e5a96; font:600 12px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:1px; }.signin-card h3 { margin:18px 0 8px; font-size:29px; color:#112136; }.signin-card p { color:#5d6b7c; line-height:1.55; }.login-form { display:grid; gap:16px; margin-top:24px; }.signed-in-state { margin-top:24px; padding:18px; border-radius:16px; background:#eff9f2; border:1px solid #c9e9d1; color:#26573a; }.signed-in-badge { display:inline-block; padding:7px 10px; border-radius:999px; background:#d3f2da; font:700 12px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:1px; }
.live-shell { min-height:760px; background:#dce6ef; color:#1b2b3d; }.live-browser,.preview-chrome { display:flex;align-items:center;gap:14px;padding:14px 18px;background:#213349;color:#d7e4f2;font:500 12px 'DM Mono',monospace; }.live-frame-wrap { position:relative;height:710px;background:#fff; }.jamis-iframe { display:block;width:100%;height:100%;border:0;background:#fff; }.iframe-overlay { position:absolute;inset:0;pointer-events:none; }.live-hotspot { position:absolute;pointer-events:auto;border:2px solid transparent;background:transparent;border-radius:8px;color:#09211d;padding:0; }.live-hotspot.guided { border-color:var(--mint);background:rgba(157,246,206,.14);box-shadow:0 0 0 9999px rgba(3,15,13,.28),0 0 24px rgba(157,246,206,.86);animation:pulse 1.8s infinite; }.live-hotspot span { position:absolute;left:0;top:calc(100% + 10px);min-width:180px;padding:8px 10px;border-radius:7px;background:var(--mint);font-size:12px;font-weight:700;text-align:left;box-shadow:0 8px 20px rgba(0,0,0,.2); }.trainer-editor { display:grid;grid-template-columns:230px minmax(0,1fr) 300px;min-height:610px;overflow:hidden; }.trainer-preview { overflow:hidden;margin-top:12px;border:1px solid rgba(157,246,206,.25);border-radius:12px;background:#e8eef4; }.preview-chrome { padding:12px;font-size:11px; }.trainer-frame-wrap { position:relative;height:560px;background:#fff;cursor:crosshair; }.trainer-iframe { display:block;width:100%;height:100%;border:0;background:#fff; }.editor-hotspot { position:absolute;z-index:2;border:2px dashed var(--orange);border-radius:8px;background:rgba(255,181,117,.16);color:#fff;cursor:grab;touch-action:none; }.editor-hotspot:active { cursor:grabbing; }.editor-hotspot span { position:absolute;top:-28px;left:0;white-space:nowrap;padding:5px 8px;border-radius:5px;background:var(--orange);color:#322114;font-size:11px;font-weight:700; }.resize-handle { position:absolute;z-index:3;display:block;background:var(--mint);border:2px solid #10261f;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.35); }.resize-width { right:-8px;top:50%;width:14px;height:28px;transform:translateY(-50%);cursor:ew-resize; }.resize-height { bottom:-8px;left:50%;width:28px;height:14px;transform:translateX(-50%);cursor:ns-resize; }.test-point { position:absolute;z-index:1;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);border:3px solid #fff;pointer-events:none; }.test-point.hit { background:#3fd38c;box-shadow:0 0 0 5px rgba(63,211,140,.28); }.test-point.miss { background:#f56758;box-shadow:0 0 0 5px rgba(245,103,88,.28); }.test-copy { margin:14px 0 0;color:var(--muted);font-size:13px; }.location-grid { display:grid;grid-template-columns:1fr 1fr;gap:0 12px; }.reset-hotspots { margin:16px 0 0;color:var(--orange); }
.trainer-editor { min-height:790px;overflow:visible; }.trainer-live-shell { min-height:760px; }.trainer-overlay { position:absolute;z-index:2;inset:0;cursor:crosshair; }.trainer-overlay .editor-hotspot { z-index:3; }
.guide { padding:22px; display:flex; flex-direction:column; }.guide h3 { margin:12px 0 7px; font-size:22px; }.guide p { color:var(--muted); line-height:1.45; }.step-count { margin-top:8px; font:12px 'DM Mono',monospace;color:var(--aqua); }.step-list { margin:20px 0; display:grid; gap:8px; }.step-dot { display:flex; gap:10px; align-items:center; color:var(--muted); font-size:13px; }.step-dot i { width:19px;height:19px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10px; }.step-dot.done { color:var(--mint); }.step-dot.done i { background:var(--mint);color:#0b211c;border-color:var(--mint); }.hint { margin-top:auto; border:1px solid rgba(255,181,117,.3);background:rgba(255,181,117,.07);padding:13px;border-radius:10px;color:#ffd5b0;font-size:13px; }.coach { margin-top:12px; color:var(--muted); font-size:13px; }.coach button { color:var(--mint); border:0;background:transparent;padding:0;text-decoration:underline; }
.spotlight { position:absolute; z-index:5; pointer-events:none; border:2px solid var(--mint); border-radius:9px; box-shadow:0 0 0 9999px rgba(3,15,13,.62),0 0 27px rgba(157,246,206,.75); animation:pulse 1.8s infinite; }.spotlight-note { position:absolute; z-index:6; max-width:230px; padding:10px 12px; color:#09211d; background:var(--mint); border-radius:8px; font-size:13px; font-weight:600; box-shadow:0 10px 30px rgba(0,0,0,.25); }.cursor { position:absolute; z-index:7; width:27px;height:36px;pointer-events:none;transition:left .8s cubic-bezier(.2,.8,.2,1),top .8s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(1px 3px 3px rgba(0,0,0,.35)); }.cursor:before { content:'';display:block;width:0;height:0;border-left:10px solid white;border-top:16px solid transparent;border-bottom:8px solid transparent;transform:rotate(-27deg); }.cursor:after { content:'';position:absolute;width:13px;height:13px;border:3px solid var(--mint);border-radius:50%;left:-1px;top:13px; }.cursor.click { animation:click .5s; }.xp-pop { position:fixed; z-index:20; left:50%;top:26%;transform:translateX(-50%); padding:17px 24px;background:var(--mint);color:#09211d;border-radius:13px;font-size:25px;font-weight:700;box-shadow:var(--shadow);animation:award 1.8s forwards; }
.auth-shell { min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; }.auth-card { width:min(100%,620px); padding:42px; }.auth-card .brand { margin-bottom:48px; }.auth-card h1 { margin-top:13px; }.auth-button { display:inline-block; margin-top:25px; text-decoration:none; }.auth-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }.auth-actions .btn { text-decoration:none; }.auth-error,.auth-success { margin-top:20px; padding:12px; border-radius:9px; }.auth-error { color:#ffe0da; background:rgba(255,143,123,.12); border:1px solid rgba(255,143,123,.38); }.auth-success { color:#cdfce2; background:rgba(157,246,206,.1); border:1px solid rgba(157,246,206,.28); }.registration-form { display:grid; gap:14px; margin-top:25px; }.registration-form label { display:grid; gap:6px; color:var(--muted); font-size:13px; }.registration-form input { border:1px solid var(--line); border-radius:8px; background:#0a1918; color:var(--ink); padding:11px; }.auth-link { display:inline-block; margin-top:20px; color:var(--mint); }
.editor { display:grid; grid-template-columns:230px minmax(0,1fr) 280px; min-height:610px; overflow:hidden; }.editor-pane { padding:18px; border-right:1px solid var(--line); }.editor-pane:last-child { border-right:0;border-left:1px solid var(--line); }.tree-item { width:100%;border:0;background:transparent;color:var(--muted);padding:10px;text-align:left;border-radius:8px; }.tree-item.active { background:rgba(157,246,206,.1);color:var(--mint); }.editor-canvas { position:relative;padding:30px;background:linear-gradient(140deg,#152d2a,#0c1e1d); }.editor-canvas .mock-window { height:370px;background:#f6f8f7;border-radius:10px;padding:28px;color:#1c2b28; }.hotspot-box { position:absolute;border:2px dashed var(--orange);border-radius:8px;pointer-events:none; }.property label { display:grid;gap:6px;color:var(--muted);font-size:12px;margin:15px 0; }.property input,.property textarea { background:#0a1918;border:1px solid var(--line);color:var(--ink);padding:9px;border-radius:7px;resize:vertical; }.toast { position:fixed;bottom:24px;right:24px;transform:translateY(90px);opacity:0;transition:.3s;background:#e5fff3;color:#09211d;padding:12px 16px;border-radius:9px;font-weight:600;box-shadow:var(--shadow); }.toast.show { transform:translateY(0);opacity:1; }
@keyframes pulse { 50% { box-shadow:0 0 0 9999px rgba(3,15,13,.62),0 0 42px rgba(157,246,206,1); } } @keyframes click { 50% { transform:scale(.72); } } @keyframes award { 0% { opacity:0; transform:translate(-50%,25px) scale(.8); } 20%,70% { opacity:1;transform:translate(-50%,0) scale(1); } 100% { opacity:0;transform:translate(-50%,-35px) scale(1.05); } }
@media (max-width:960px) { .shell { padding:20px; }.dashboard-hero,.player,.editor,.trainer-editor,.jamis-stage { grid-template-columns:1fr; }.player-head { display:block; }.mode-switch { margin-top:18px; }.guide { min-height:300px; }.editor-pane { border-right:0;border-bottom:1px solid var(--line); }.editor-pane:last-child { border-left:0;border-top:1px solid var(--line); }.course-grid { grid-template-columns:1fr 1fr; } } @media (max-width:600px) { .topbar { align-items:flex-start; }.nav { display:none; }.profile span { display:none; } h1 { letter-spacing:-1.5px; }.continue { padding:24px; }.course-grid,.form-grid { grid-template-columns:1fr; }.erp,.jamis-stage { grid-template-columns:1fr; }.erp-side { padding:10px; }.erp-logo { display:none; }.erp-nav { display:flex;overflow:auto; }.erp-nav button { white-space:nowrap;width:auto; }.erp-main { padding:18px; }.erp-top { align-items:flex-start;gap:10px; }.erp-top h2 { font-size:20px; }.jamis-browser,.live-browser { flex-wrap:wrap; }.jamis-stage { padding:20px; } .signin-card { padding:24px; }.live-frame-wrap { height:480px; }.trainer-frame-wrap { height:420px; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important; } }