/* Avalon Gift — 2026 visual system */
:root{
  --forest-950:#0b2119;
  --forest-900:#102f23;
  --forest-800:#174c36;
  --forest-700:#246847;
  --lime:#7bd800;
  --lime-dark:#4e9300;
  --lime-soft:#edf8dc;
  --paper:#f4f3ed;
  --white:#fff;
  --ink:#14271e;
  --muted:#5d6f65;
  --line:#d8ddd5;
  --sand:#d8c6a4;
  --sand-soft:#f1eadf;
  --red:#a63b32;
  --red-soft:#f8e7e4;
  --shadow:0 18px 50px rgba(11,33,25,.08);
  --shadow-strong:0 30px 80px rgba(4,24,16,.2);
  --radius:20px;
  --radius-sm:12px;
}

html{background:var(--paper)}
body{font-family:Manrope,"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--paper)}
.app-page{background:
  radial-gradient(circle at 88% 3%,rgba(123,216,0,.08),transparent 23rem),
  linear-gradient(180deg,#f8f8f4 0,var(--paper) 38rem)}

/* Navigation */
.sidebar{
  width:292px;
  padding:34px 24px 24px;
  background:
    radial-gradient(circle at 15% 5%,rgba(123,216,0,.14),transparent 17rem),
    linear-gradient(165deg,#122f24 0,#0b2119 68%,#071812 100%);
  border-right:1px solid rgba(255,255,255,.06)
}
.sidebar:before{width:430px;height:430px;right:-325px;top:110px;border-color:rgba(123,216,0,.1)}
.sidebar:after{width:260px;height:260px;right:-195px;top:195px;border-color:rgba(255,255,255,.05)}
.logo{display:flex;flex-direction:column;align-items:flex-start;gap:11px;padding:0 12px;color:#fff}
.logo img{width:130px;height:auto;color:#fff;display:block}
.logo>span{font-size:10px;line-height:1;letter-spacing:.28em;color:#a7df65;font-weight:800}
.sidebar nav{margin-top:50px;gap:9px}
.sidebar nav a{padding:15px 16px;font-size:14px;color:#c5d0c9;border-radius:13px}
.sidebar nav a>span{font-size:18px;width:24px;color:#84ad95}
.sidebar nav a:hover{background:rgba(255,255,255,.065);color:#fff}
.sidebar nav a.active{background:linear-gradient(100deg,var(--lime),#91e529);color:#102a1f;box-shadow:0 14px 30px rgba(0,0,0,.22)}
.security-note{padding:16px;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.1)}
.security-note>span{color:var(--lime)}
.security-note b{font-size:12px;color:#f4f8f5}
.security-note small{font-size:11px;color:#aebdb4}
.profile{padding:20px 4px 0;margin-top:18px}
.profile>span{width:42px;height:42px;background:var(--lime-soft);color:var(--forest-900);font-size:12px}
.profile b{font-size:12px;color:#fff}.profile small{font-size:10px;color:#aebdb4}
.profile button{color:#aebdb4}

/* General layout */
.content{margin-left:292px;padding:48px clamp(28px,4.5vw,76px) 80px;max-width:1600px}
.eyebrow{font-size:11px;letter-spacing:.19em;color:var(--lime-dark);margin-bottom:12px}
.hero h1,.page-heading h1{font-size:clamp(34px,4vw,52px);letter-spacing:-.045em;line-height:1.02}
.hero p:not(.eyebrow){font-size:16px;color:var(--muted);margin-top:14px}
.hero:after{width:126px;height:126px;border:22px solid rgba(123,216,0,.1);right:7%;top:-35px}
.date-chip{font-size:12px;font-weight:700;color:var(--forest-700);background:rgba(255,255,255,.7);backdrop-filter:blur(8px);padding:11px 16px;border-color:#dfe5dc}
.page-heading{margin-bottom:34px}

/* Primary scanner */
.scan-panel{
  margin:36px 0 24px;
  min-height:112px;
  padding:24px 26px;
  gap:20px;
  background:
    radial-gradient(circle at 94% 25%,rgba(123,216,0,.22),transparent 17rem),
    linear-gradient(112deg,#0b2b1d,#15583a);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:0 28px 60px rgba(7,40,26,.2)
}
.scan-panel:after{width:270px;height:270px;border-width:1px;border-color:rgba(255,255,255,.12);right:-95px;top:-78px}
.scan-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:rgba(123,216,0,.12);font-size:25px}
.scan-copy{min-width:210px}
.scan-copy label{font-size:15px}.scan-copy span{font-size:11px;color:#b5c8bc;margin-top:5px}
.scan-panel input{height:56px;background:rgba(0,0,0,.2);border-color:rgba(255,255,255,.19);border-radius:13px;font-size:16px;padding-inline:18px}
.scan-panel input::placeholder{color:#9fb2a6}
.scan-panel .button{height:56px;padding-inline:27px}

/* Buttons and fields */
.button{min-height:48px;border-radius:12px;font-size:13px;padding:13px 22px;letter-spacing:.02em}
.button.primary{background:linear-gradient(110deg,var(--lime),#8fe323);color:#112a1f;box-shadow:0 10px 22px rgba(74,132,0,.15)}
.button.primary:hover{background:linear-gradient(110deg,#88e40a,#9ced35);box-shadow:0 14px 28px rgba(74,132,0,.23)}
.button.secondary{background:#fff;color:var(--forest-800);border-color:#d5ddd4}
input,select,textarea{min-height:50px;background:#fbfcfa;border:1px solid #ced8ce;border-radius:11px;color:var(--ink);font-size:15px;padding:13px 15px}
textarea{min-height:auto}
input:focus,select:focus,textarea:focus{border-color:#5ea800;box-shadow:0 0 0 4px rgba(123,216,0,.14);background:#fff}
label{font-size:12px;color:#365143;gap:8px}

/* Dashboard metrics */
.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.stat{position:relative;min-height:126px;padding:24px 22px;border-color:#e1e4de;border-radius:18px;box-shadow:0 14px 35px rgba(11,33,25,.055);overflow:hidden}
.stat:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-48px;bottom:-58px;background:var(--lime-soft)}
.stat-icon{width:46px;height:46px;border-radius:14px;font-size:19px}
.stat small{font-size:10px;color:#5d7065}.stat strong{font-size:26px;margin:5px 0}.stat div span{font-size:11px;color:#65786d}

/* Cards, forms and tables */
.form-card,.card-overview,.table-card{border-color:#dfe4dd;border-radius:20px;box-shadow:var(--shadow)}
.form-card{padding:30px}.form-title{padding-bottom:22px;margin-bottom:24px}.form-title>span{font-family:Georgia,serif;font-size:28px;color:#83bf35}.form-title p{font-size:12px}
.expiry-rule{min-height:50px;padding:10px 14px;border:1px solid #ccc;border-radius:11px;background:#f1f1f1;display:flex;flex-direction:column;justify-content:center}.expiry-rule span{font-size:9px;letter-spacing:.14em;color:#777;font-weight:800}.expiry-rule strong{font-size:14px;color:#222;margin-top:2px}.expiry-rule small{font-size:10px;color:#707070;margin-top:1px}
.table-section{margin-top:38px}.section-head{margin-bottom:16px}.section-head h2,.form-title h2,dialog h2{font-size:22px}.section-head a{font-size:11px}
.table-card th{padding:15px 18px;background:#eef1ec;color:#405548;font-size:11px}.table-card td{padding:17px 18px;font-size:14px}.table-card td small{font-size:11px;color:#586b60}
.clickable-row{cursor:pointer;transition:background-color .16s ease,box-shadow .16s ease}.clickable-row:hover,.clickable-row:focus-visible{background:#f0f0f0;box-shadow:inset 4px 0 0 #555;outline:0}.clickable-row:active{background:#e7e7e7}
.users-table table{min-width:0;table-layout:fixed}.users-table th:nth-child(1){width:30%}.users-table th:nth-child(2){width:30%}.users-table th:nth-child(3){width:16%}.users-table th:nth-child(4){width:10%}.users-table th:nth-child(5){width:14%}.users-table td{vertical-align:middle}.users-table td:first-child small{overflow-wrap:anywhere}.permission-summary small{display:block;margin-top:6px;line-height:1.35}.permission-summary strong{font-size:14px}.edit-cell{text-align:right}.edit-cell .button{min-height:36px;padding:8px 14px}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.profile small{text-transform:capitalize}
.table-card td:nth-child(5) small{text-transform:capitalize}
@media(max-width:980px){.users-table table{min-width:760px}}
.user-edit-form{max-width:820px}.permission-readonly{padding:16px 18px;border:1px solid #dfe4dd;border-radius:12px;background:#f4f5f4}.permission-readonly span,.permission-readonly strong,.permission-readonly small{display:block}.permission-readonly span{font-size:10px;font-weight:800;color:#68736d;text-transform:uppercase;letter-spacing:.1em}.permission-readonly strong{margin-top:7px;font-size:16px}.permission-readonly small{margin-top:4px;color:#737d77}.checkbox-row{display:flex;align-items:center;gap:10px;padding:13px 15px;border:1px solid #dfe4dd;border-radius:10px;background:#f8f9f8}.checkbox-row input{width:18px;height:18px;margin:0;accent-color:#555}.checkbox-row span{font-size:13px}.edit-meta{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:4px;margin-bottom:20px;color:#737d77;font-size:11px}
.filters{padding:20px;border-radius:18px;border-color:#dfe4dd;box-shadow:0 10px 28px rgba(11,33,25,.04)}
.empty-state{padding:80px 30px;background:rgba(255,255,255,.72);border-color:#cdd8cc;border-radius:22px}
.empty-state>div{width:74px;height:74px;margin:auto;display:grid;place-items:center;border-radius:20px;background:var(--lime-soft);font-size:35px}
.status-banner{border-radius:17px;padding:20px 22px}
.alert{border-radius:12px;font-size:13px}

/* Digital gift card */
.card-overview{grid-template-columns:minmax(380px,1fr) 1.05fr;padding:34px;gap:38px}
.gift-card{max-width:520px;aspect-ratio:1.6;padding:28px;background:
  radial-gradient(circle at 88% 15%,rgba(123,216,0,.42),transparent 15rem),
  linear-gradient(135deg,#0b281d,#145139 65%,#1f7048);border-radius:22px;box-shadow:0 28px 55px rgba(3,33,21,.28)}
.gift-card:before{background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.07) 43%,transparent 65%)}
.gift-top{align-items:flex-start}.gift-top img{width:96px;color:#fff}.gift-top em{font-size:8px;letter-spacing:.21em;color:#d9edcf;padding-top:5px}
.gift-balance{left:28px;bottom:68px}.gift-balance small{font-size:8px;color:#bcd1c5}.gift-balance strong{font-size:31px;margin-top:4px}
.gift-bottom{left:28px;right:28px;bottom:24px;font-size:8px}
.gift-bottom span{font-family:Consolas,monospace;letter-spacing:.13em}
.card-details{display:flex;flex-direction:column;justify-content:center;padding:8px 12px}.status-line{font-size:12px;padding-bottom:20px}.badge{font-size:9px;padding:6px 10px}.card-details dl{gap:24px;margin-top:24px}.card-details dt{font-size:9px}.card-details dd{font-size:13px;margin-top:7px}
.action-tabs{margin-top:34px}.action-tabs button{font-size:12px;padding:15px 24px}

/* Login */
.auth-page{display:grid;place-items:center;padding:34px;background:
  radial-gradient(circle at 9% 12%,rgba(123,216,0,.18),transparent 26rem),
  radial-gradient(circle at 91% 87%,rgba(216,198,164,.16),transparent 24rem),
  #081d16}
.auth-page:before{width:620px;height:620px;right:-360px;top:-340px;border:1px solid rgba(255,255,255,.08)}
.auth-page:after{width:460px;height:460px;left:-280px;bottom:-290px;background:transparent;border:1px solid rgba(123,216,0,.12)}
.auth-shell{width:min(1040px,100%);min-height:630px;display:grid;grid-template-columns:1.08fr .92fr;background:#fff;border-radius:28px;overflow:hidden;box-shadow:0 40px 120px rgba(0,0,0,.38);position:relative;z-index:1}
.auth-brand-panel{position:relative;display:flex;flex-direction:column;padding:54px;background:
  linear-gradient(180deg,rgba(10,37,26,.1),rgba(7,29,21,.84)),
  radial-gradient(circle at 86% 22%,#347b51 0,#123b2a 40%,#0a251b 78%);color:#fff;overflow:hidden}
.auth-brand-panel:before{content:"";position:absolute;width:340px;height:340px;border:1px solid rgba(255,255,255,.11);border-radius:50%;right:-170px;top:85px}
.auth-brand-panel:after{content:"";position:absolute;width:260px;height:260px;border:56px solid rgba(123,216,0,.08);border-radius:50%;right:-150px;top:125px}
.auth-brand-panel>img{width:142px;color:#fff;position:relative;z-index:1}
.auth-brand-panel>div{margin:auto 0;position:relative;z-index:1}.auth-kicker{font-size:10px;letter-spacing:.28em;color:#aeea68;font-weight:800}.auth-brand-panel h2{font-family:Georgia,serif;font-size:46px;font-weight:400;line-height:1.03;letter-spacing:-.025em;margin:18px 0 20px}.auth-brand-panel p{max-width:380px;color:#c4d3ca;font-size:14px;line-height:1.8}
.auth-card{width:auto;padding:72px 66px;border-radius:0;box-shadow:none;display:flex;flex-direction:column;justify-content:center}
.auth-card .eyebrow{text-align:left;margin:0 0 15px}.auth-card h1{text-align:left;font-size:42px}.auth-card>.muted{text-align:left;font-size:14px;margin:10px 0 34px}.auth-card .stack{gap:20px}.auth-card label{font-size:12px}.auth-card input{min-height:54px}.auth-card .button{min-height:55px;margin-top:2px}.login-security{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:24px;font-size:10px;color:#728279}.login-security span{width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:var(--lime-soft);color:#4f9300;font-weight:800}
dialog{border-radius:22px;padding:38px}

@media(max-width:1050px){
  .stats-grid{grid-template-columns:1fr 1fr}.stat:last-child{grid-column:1/-1}
  .card-overview{grid-template-columns:1fr}.gift-card{width:100%}
  .auth-shell{grid-template-columns:1fr 1fr}.auth-brand-panel{padding:42px}.auth-card{padding:58px 44px}
}
@media(max-width:760px){
  .sidebar{width:286px}.content{margin-left:0;padding:30px 18px 60px}.mobile-head{height:76px;padding:11px 18px;background:#0b251b}.mobile-head .logo{padding:0;gap:2px}.mobile-head .logo img{width:82px}.mobile-head .logo span{font-size:7px}.mobile-head button{font-size:24px}
  .hero h1,.page-heading h1{font-size:36px}.scan-panel{grid-template-columns:auto 1fr;margin-top:28px}.scan-panel input,.scan-panel .button{grid-column:1/-1}.scan-icon{width:46px;height:46px}.scan-copy{min-width:0}
  .stats-grid{grid-template-columns:1fr}.stat:last-child{grid-column:auto}
  .auth-page{padding:18px}.auth-shell{grid-template-columns:1fr;min-height:0}.auth-brand-panel{min-height:245px;padding:28px}.auth-brand-panel>img{width:105px}.auth-brand-panel h2{font-size:32px;margin:10px 0}.auth-brand-panel p{font-size:12px;line-height:1.5;margin:0}.auth-card{padding:36px 28px}.auth-card h1{font-size:34px}.auth-card>.muted{margin-bottom:25px}
  .card-overview{padding:17px}.gift-card{min-width:0}.filters{display:grid;grid-template-columns:1fr 1fr}.filters label:first-child,.filters .button{grid-column:1/-1}
}
@media(max-width:430px){
  .auth-brand-panel{min-height:220px}.auth-brand-panel p{display:none}.auth-card{padding:30px 22px}
  .gift-card{padding:20px}.gift-top img{width:78px}.gift-balance{left:20px;bottom:58px}.gift-balance strong{font-size:24px}.gift-bottom{left:20px;right:20px;bottom:20px}
}

/* Monokróm arculat */
:root{
  --forest-950:#202020;
  --forest-900:#2b2b2b;
  --forest-800:#3b3b3b;
  --forest-700:#555555;
  --lime:#383838;
  --lime-dark:#555555;
  --lime-soft:#eeeeee;
  --paper:#f2f2f2;
  --ink:#151515;
  --muted:#666666;
  --line:#d8d8d8;
  --sand:#b8b8b8;
  --sand-soft:#ececec;
  --red:#303030;
  --red-soft:#ededed;
  --shadow:0 18px 50px rgba(0,0,0,.08);
  --shadow-strong:0 30px 80px rgba(0,0,0,.2)
}
html{background:#f2f2f2}
body,.app-page{background:linear-gradient(180deg,#fafafa 0,#f1f1f1 38rem);color:#151515}
.sidebar{background:linear-gradient(165deg,#363636 0,#252525 72%,#1d1d1d);border-right-color:#464646}
.sidebar:before,.sidebar:after{border-color:rgba(255,255,255,.08)}
.logo>span{color:#bdbdbd}
.sidebar nav a{color:#bdbdbd}.sidebar nav a>span{color:#8d8d8d}
.sidebar nav a:hover{background:#444;color:#fff}
.sidebar nav a.active{background:#f4f4f4;color:#202020;box-shadow:0 12px 28px rgba(0,0,0,.22)}
.sidebar nav a.active>span{color:#111}
.security-note{background:#303030;border-color:#505050}.security-note>span{color:#fff}.security-note small{color:#b5b5b5}
.profile>span{background:#eee;color:#111}.profile small,.profile button{color:#9e9e9e}
.eyebrow{color:#3f3f3f}.hero:after{border-color:rgba(0,0,0,.06)}
.date-chip{color:#3c3c3c;border-color:#ddd;background:rgba(255,255,255,.82)}
.scan-panel{background:linear-gradient(112deg,#353535,#595959);border-color:#686868;box-shadow:0 24px 48px rgba(0,0,0,.14)}
.scan-panel:after{border-color:rgba(255,255,255,.1)}
.scan-icon{background:#505050;color:#fff}.scan-copy span{color:#d0d0d0}
.scan-panel input{background:#454545;border-color:#777}.scan-panel input:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.13)}
.scan-panel input::placeholder{color:#8c8c8c}
.button.primary{background:#3c3c3c;color:#fff;box-shadow:0 10px 22px rgba(0,0,0,.12)}
.button.primary:hover{background:#555;color:#fff;box-shadow:0 14px 28px rgba(0,0,0,.17)}
.button.secondary{color:#222;border-color:#ccc}
label{color:#444}
input,select,textarea{border-color:#ccc;background:#fafafa;color:#181818}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{-webkit-text-fill-color:#181818;box-shadow:0 0 0 1000px #f3f3f3 inset}
.input-action button{color:#777}
input:focus,select:focus,textarea:focus{border-color:#333;box-shadow:0 0 0 4px rgba(0,0,0,.09)}
.stat:after{background:#e8e8e8}.stat-icon.gold,.stat-icon.green,.stat-icon.pale,.stat-icon.dark{background:#ededed;color:#222}
.form-title>span{color:#4a4a4a}.empty-state>div{background:#e8e8e8;color:#222}
.status-banner{background:#eee;border-color:#d3d3d3}.status-banner>span{background:#222;color:#fff}
.badge.success,.badge.danger{background:#e5e5e5;color:#242424}
.amount.positive,.amount.negative{color:#262626}
.alert.success,.alert.danger,.alert.info{background:#eee;border-color:#555;color:#222}
.gift-card{background:radial-gradient(circle at 88% 15%,rgba(255,255,255,.18),transparent 15rem),linear-gradient(135deg,#303030,#515151 65%,#747474);box-shadow:0 24px 48px rgba(0,0,0,.2)}
.gift-shine,.card-shine{filter:grayscale(1)}
.action-tabs button.active{color:#111;border-bottom-color:#111}
.auth-page{background:radial-gradient(circle at 9% 12%,rgba(255,255,255,.11),transparent 26rem),radial-gradient(circle at 91% 87%,rgba(255,255,255,.08),transparent 24rem),#303030}
.auth-page:before,.auth-page:after{border-color:rgba(255,255,255,.08)}
.auth-brand-panel{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.38)),radial-gradient(circle at 86% 22%,#828282 0,#555 40%,#303030 78%)}
.auth-brand-panel:after{border-color:rgba(255,255,255,.06)}
.auth-kicker{color:#d0d0d0}.auth-brand-panel p{color:#bdbdbd}
.login-security{color:#777}.login-security span{background:#ededed;color:#222}
.mobile-head{background:#292929}