/*
Theme Name: Symon Integrated System
Theme URI: https://example.invalid/
Author: Symon
Description: Symon desktop-inspired green and charcoal WordPress application theme.
Version: 0.2.2
Requires PHP: 8.1
Text Domain: symon
*/
:root{--green:#47c955;--green-light:#5be56c;--deep:#0d131b;--panel:#151e27;--border:#34414a;--muted:#aeb8c5}
*{box-sizing:border-box}html{min-height:100%;background:#0b1117}body{margin:0;min-height:100vh;background:#0b1117;color:#f6f8fb;font:16px/1.55 "Segoe UI",Arial,sans-serif}
a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}
.symon-shell{min-height:100vh;padding:20px;display:flex;align-items:stretch;justify-content:center}
.symon-window{width:100%;max-width:1600px;min-height:calc(100vh - 40px);display:flex;border:1px solid #626a72;border-radius:24px;overflow:hidden;background:radial-gradient(circle at 65% 40%,#18232d 0,#0d141d 58%,#0b1119 100%);box-shadow:0 25px 80px #0009}
.symon-side{position:relative;overflow:hidden;width:330px;flex-shrink:0;padding:42px 34px;background:radial-gradient(circle at 22% 10%,#329d49,#14632e 55%,#064322 100%);display:flex;flex-direction:column}
.symon-side:before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#75e77e 2px,transparent 3px) 0 0/24px 24px;mask-image:linear-gradient(to bottom,#000 0,transparent 130px);opacity:.65;pointer-events:none}
.symon-side:after{content:"";position:absolute;bottom:-70px;left:-35%;width:170%;height:210px;border-radius:50% 50% 0 0;background:#043a22;transform:rotate(-12deg);opacity:.4;pointer-events:none}
.symon-brand{display:flex;align-items:center;flex-direction:column;text-align:center;margin:64px auto 36px;position:relative;z-index:1}
.symon-logo-box{width:105px;height:105px;border:2px solid var(--green-light);border-radius:30px;background:linear-gradient(145deg,#4bc64c,#0d5b2c);display:grid;place-items:center;font-weight:900;font-size:76px;line-height:1;color:#fff;text-shadow:0 3px 8px #0003}
.symon-brand-name{font-size:48px;line-height:1.15;font-weight:900;letter-spacing:-2px;margin-top:12px}
.symon-brand-sub{font-size:17px;letter-spacing:1px;font-weight:700;color:var(--green-light)}
.symon-brand-rule{height:3px;width:42px;background:var(--green-light);margin-top:20px}
.symon-side nav{position:relative;z-index:1;display:grid;gap:6px;margin-top:12px}
.symon-side nav a{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:10px;color:#f0fff2}
.symon-side nav a:hover,.symon-side nav a.is-current{background:#073f24b8;color:#72f581}
.symon-side nav .nav-ico{font-size:22px;width:25px;text-align:center}
.symon-side-foot{position:relative;z-index:1;margin-top:auto;color:#e8ffec;font-size:14px}
.symon-main{flex:1;min-width:0;padding:52px 44px;display:flex;flex-direction:column}
.symon-topbar{display:flex;justify-content:flex-end;gap:14px;align-items:center;min-height:40px}
.symon-user{color:#f2f5f8;font-size:14px}
.symon-user-dot{color:var(--green-light);font-size:25px;vertical-align:middle;margin-right:8px}
.symon-page{flex:1;display:flex;flex-direction:column;padding-top:35px}
.symon-page h1{font-size:38px;line-height:1.2;margin:0 0 10px}
.symon-lead{color:var(--muted);font-size:18px;margin:0 0 28px}
.symon-divider{height:1px;background:#28343e;margin:0 0 44px}
.symon-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.symon-card{min-height:350px;border:1px solid #34434e;border-radius:14px;background:linear-gradient(145deg,#1a2731,#101922);padding:35px 14px 22px;display:flex;align-items:center;flex-direction:column;text-align:center;transition:transform .2s,border-color .2s}
a.symon-card:hover{transform:translateY(-4px);border-color:var(--green-light)}
.symon-icon{width:108px;height:108px;border:2px solid var(--green-light);border-radius:50%;background:linear-gradient(145deg,#36b947,#09592b);display:grid;place-items:center;font-size:47px;margin-bottom:25px;color:#fff}
.symon-card strong{font-size:19px;line-height:1.3;min-height:52px}
.symon-card-rule{width:34px;height:3px;background:var(--green-light);margin:12px 0 18px}
.symon-card span.symon-card-description{color:#c2cbd5;line-height:1.6;font-size:15px}
.symon-card.is-locked{opacity:.52}.symon-card .symon-status{margin-top:auto;padding-top:16px;font-size:12px;color:#80f58b}
.symon-card.is-locked .symon-status{color:#c3cbd4}
.symon-footer{border-top:1px solid #293540;padding:20px 0 0;margin-top:65px;text-align:center;color:#b4c0cc;font-size:14px}
.symon-footer .shield{color:var(--green-light);margin-right:12px}
.symon-login-side{width:34%;min-width:300px;justify-content:center;text-align:center;padding:36px}
.symon-login-side .symon-brand{margin:0 auto 42px}
.symon-login-side h2{font-size:23px;margin:0 0 12px}
.symon-login-side p{max-width:350px;margin:0 auto;color:#ecfff0;font-size:17px}
.symon-login-main{justify-content:center;padding:65px clamp(35px,7vw,120px)}
.symon-login-box{width:100%;max-width:720px;margin:auto}
.symon-login-box h1{font-size:46px;margin:0 0 3px}
.symon-login-box .symon-lead{font-size:22px;margin-bottom:38px}
.symon-login-form label{display:block;font-size:17px;font-weight:600;margin:0 0 10px}
.symon-login-form input[type=text],.symon-login-form input[type=password]{display:block;width:100%;padding:17px 19px;background:#101923;border:1px solid #43515e;border-radius:12px;color:#fff;outline:none;margin:0 0 24px}
.symon-login-form input:focus{border-color:var(--green-light);box-shadow:0 0 0 3px #52d66530}
.symon-login-form .login-remember label{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:400}
.symon-login-form input[type=checkbox]{accent-color:var(--green);width:20px;height:20px}
.symon-login-form .login-submit input,.symon-btn{width:100%;padding:15px 20px;border:1px solid #64e876;border-radius:12px;background:linear-gradient(120deg,#45bf51,#1b7a39);color:white;font-weight:800;font-size:20px;cursor:pointer}
.symon-login-form .login-submit input:hover,.symon-btn:hover{filter:brightness(1.12)}
.symon-login-links{display:flex;justify-content:space-between;gap:16px;margin-top:18px;color:var(--green-light);font-size:15px}
.symon-security{text-align:center;color:#b8c5d2;margin-top:32px}
.symon-notice{padding:18px;border:1px solid #53616a;border-radius:12px;color:#e1e8f0}
@media(max-width:1200px){.symon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.symon-card{min-height:290px}.symon-main{padding:35px 28px}.symon-side{width:280px}}
@media(max-width:780px){.symon-shell{padding:0}.symon-window{border:0;border-radius:0;min-height:100vh;display:block}.symon-side{width:100%;padding:18px 24px;min-height:auto}.symon-brand{margin:5px auto 15px}.symon-logo-box{width:60px;height:60px;font-size:42px;border-radius:17px}.symon-brand-name{font-size:30px}.symon-brand-sub{font-size:11px}.symon-brand-rule{margin-top:8px}.symon-side nav{display:flex;flex-wrap:wrap;justify-content:center}.symon-side nav a{padding:8px}.symon-side-foot{display:none}.symon-main{padding:24px 20px}.symon-page{padding-top:20px}.symon-page h1{font-size:30px}.symon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.symon-card{min-height:255px;padding:22px 10px}.symon-icon{width:76px;height:76px;font-size:34px;margin-bottom:14px}.symon-card strong{font-size:16px}.symon-card span.symon-card-description{font-size:13px}.symon-login-side{min-width:0}.symon-login-side h2,.symon-login-side p{display:none}.symon-login-main{padding:28px 22px}.symon-login-box h1{font-size:36px}}
@media(max-width:420px){.symon-grid{grid-template-columns:1fr}.symon-card{min-height:220px}.symon-login-links{flex-direction:column}}

.symon-content-page{width:100%;max-width:1100px;margin:0 auto}.symon-content-page .symon-my-subscription,.symon-content-page .symon-register{margin-top:0}

/* v0.2.2: account registration and pending approval */
.symon-login-links{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap}
.symon-register-link{font-weight:700;color:#65e783!important}
.symon-account-alert{background:#3a3220;border:1px solid #aa8644;border-radius:10px;color:#ffe6a3;padding:14px 18px;margin:0 0 22px}
.symon-account-alert strong{color:#fff2c7}