:root {
    --color-primary: #667eea;
    --color-primary-dark: #764ba2;
    --color-text: #2c3e50;
    --color-text-light: #34495e;
    --color-text-muted: #7f8c8d;
    --color-bg: #f5f7fa;
    --color-white: #fff;
    --color-border: #e1e8ed;
    --color-table-border: #f0f0f0;
    --color-hover: #f8f9fa;
    --color-danger: #e74c3c;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg: 0 2px 10px rgba(0,0,0,0.1);
    --shadow-primary-light: 0 0 0 3px rgba(102, 126, 234, 0.1);
    --shadow-primary: 0 4px 8px rgba(102, 126, 234, 0.3);
    --shadow-primary-md: 0 4px 12px rgba(102, 126, 234, 0.3);
    --shadow-primary-sm: 0 2px 6px rgba(102, 126, 234, 0.2);
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --icon-circle: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="3" fill="%23667eea"/></svg>');
    --icon-star: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 2l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z" fill="%23667eea"/></svg>');
}

body {margin:0;padding:0;line-height: 1.6em;background: var(--color-bg);font: 15px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;color: var(--color-text);letter-spacing: 0.3px;}

#header {background: var(--gradient-primary);padding: 30px 20px;font-size: 2em;font-weight: 600;letter-spacing: 2px;text-align: center;border-bottom: none;color: var(--color-white);box-shadow: var(--shadow-lg);}

ul#navtop {background-color: var(--color-white);margin: 0; padding: 15px 30px;white-space: nowrap;border-bottom: 1px solid var(--color-border);box-shadow: var(--shadow-sm);}

/*Navigation Styles*/

#navtop li {display: inline;list-style-type: none;margin-right: 5px;}

#navtop a {padding: 8px 16px;border-radius: 6px;transition: all 0.3s ease;display: inline-block;}

#navtop a:link, #navtop a:visited {color: var(--color-primary);text-decoration: none;border: 1px solid transparent;outline:none;font-weight: 500;}

#navtop a:hover{color: var(--color-white);background: var(--gradient-primary);text-decoration: none;border: 1px solid transparent;transform: translateY(-2px);box-shadow: var(--shadow-primary);}

.navbottom {margin-left: 0;padding-left: 0;}

#maincontainer {width: 85%;max-width: 1400px;margin: 30px auto;padding: 0 20px;}

#contentwrapper {float: left;width: 100%;}

/*Content Styles*/

#contentcolumn {font-size: 1em;background: var(--color-white);padding: 30px;border-radius: 8px;box-shadow: var(--shadow-md);}

a,a:active,a:visited {outline:none;color: var(--color-primary);text-decoration: none;transition: color 0.2s ease;}

a:hover {color: var(--color-primary-dark);text-decoration: underline;}

h1,h2,h3 {font-size: 1.8em;margin: 0 0 20px 0;color: var(--color-text);font-weight: 600;}

h4,h5,h6 {font-size: 1.3em;margin: 20px 0 15px 0;color: var(--color-text-light);font-weight: 600;}

#list {margin-left: 20px;padding-left: 0;list-style: none;}

#list li {padding: 8px 0 8px 25px;background: var(--icon-circle) no-repeat 0 10px;}

div.hr {margin: 20px 0;height: 1px;background: linear-gradient(to right, transparent, var(--color-border), transparent);}

div.hr hr {display: none;}

#columns {margin: 0;}

#columns li {list-style-type: none;}

#leftcolumn {float: left;width: 48%;font-size: 1em;}

#leftcolumn li {padding: 8px 0 8px 25px;background: var(--icon-star) no-repeat 0 8px;}

#rightcolumn {float: right;width: 48%;font-size: 1em;}

#rightcolumn li {padding: 8px 0 8px 25px;background: var(--icon-star) no-repeat 0 8px;}

#footer {clear: left;width: 100%;border-top: 1px solid var(--color-border);margin-top: 40px;padding: 30px 0;font-size: 0.95em;color: var(--color-text-muted);background: var(--color-white);border-radius: 8px;text-align: center;box-shadow: 0 -2px 8px rgba(0,0,0,0.05);}

/*Image and Gallery Styles*/

.imgleft {float: left;margin: 6px 10px 0 0;border-radius: 8px;}

.imgright {float: right;margin: 6px 0 0 10px;border-radius: 8px;}

.gallery {margin-right: 5px;border: none;}

.gallery_right_img {margin-right: 0;border: none;}

/*Form Styles*/

.form {margin: 30px 0;}

.form p {width: 100%;max-width: 500px;clear: left;margin: 0 0 15px 0;padding: 0;height: auto;}

.form label{font-weight: 600;float: left;margin-left: 0;width: 100%;margin-bottom: 8px;color: var(--color-text-light);}

.form .input {width: 100%;max-width: 400px;background-color: var(--color-white);border: 2px solid var(--color-border);letter-spacing: 0.3px;padding: 12px 15px;font-size: 15px;border-radius: 6px;transition: all 0.3s ease;box-sizing: border-box;}

.form .input:focus {border-color: var(--color-primary);outline: none;box-shadow: var(--shadow-primary-light);}

.form textarea {width: 100%;max-width: 500px;height: 150px;background-color: var(--color-white);border: 2px solid var(--color-border);font: 15px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;letter-spacing: 0.3px;padding: 12px 15px;border-radius: 6px;transition: all 0.3s ease;box-sizing: border-box;resize: vertical;}

.form textarea:focus {border-color: var(--color-primary);outline: none;box-shadow: var(--shadow-primary-light);}

#submit {margin-left: 0;margin-top: 10px;}

* html #submit {margin-left: 0;}

.pagination {display: flex;flex-wrap: wrap;justify-content: flex-start;margin-bottom: 20px;gap: 10px;}
.pagination .btn {margin-bottom: 0;margin-right: 0;padding: 8px 16px;font-size: 14px;}
.pagination .btn.active {background: var(--gradient-primary);color: var(--color-white);border: 2px solid var(--color-primary);}

.btn {background: var(--color-white);border: 2px solid var(--color-primary);color: var(--color-primary);cursor: pointer;letter-spacing: 0.3px;padding: 10px 20px;text-decoration: none;font-weight: 500;border-radius: 6px;transition: all 0.3s ease;display: inline-block;font-size: 15px;}
.btn:hover, .btn:focus {background: var(--gradient-primary);border: 2px solid var(--color-primary);color: var(--color-white);outline: none;transform: translateY(-2px);box-shadow: var(--shadow-primary-md);}
.btn:active, .btn:visited {color: var(--color-primary);outline: none;text-decoration: none;}
.btn:active {transform: translateY(0);box-shadow: var(--shadow-primary-sm);}

/* search form */
.searchinput {width: 200px;background-color: var(--color-white);border: 2px solid var(--color-border);letter-spacing: 0.3px;padding: 8px 12px;border-radius: 6px;transition: all 0.3s ease;font-size: 14px;}
.searchinput:focus {border-color: var(--color-primary);outline: none;box-shadow: var(--shadow-primary-light);}

/* key form */
.keybutton {background-color: var(--color-white);border: 2px solid var(--color-danger);color: var(--color-danger);cursor: pointer;padding: 6px 12px;border-radius: 6px;transition: all 0.3s ease;font-weight: 500;}
.keybutton:hover {background-color: var(--color-danger);color: var(--color-white);}

/* progress */
dl.progress,
dl.progress * {margin: 0; padding: 0;}
dl.progress {padding: 2px; border: none; height: 24px; width: 300px;background-color: var(--color-border);border-radius: 12px;overflow: hidden;}
.progress .done {background: var(--gradient-primary);border-radius: 10px;height: 100%;transition: width 0.3s ease;}

/* BSSID */
.bssid {font-family: 'Monaco', 'Menlo', 'Consolas', monospace; font-size: 13px; cursor: pointer;color: var(--color-primary);font-weight: 500;}

/* Generic table cell padding for tables without specific classes */
td {padding: 7px;}

/* table td */
table.nets {border-collapse: collapse;width: 100%;background: var(--color-white);border-radius: 8px;overflow: hidden;box-shadow: var(--shadow-md);}
table.nets th {background: var(--gradient-primary);color: var(--color-white);padding: 15px 12px;text-align: left;font-weight: 600;font-size: 14px;}
table.nets td {padding: 12px;border-bottom: 1px solid var(--color-table-border);}
table.nets tr:last-child td {border-bottom: none;}
table.nets tr:hover {background-color: var(--color-hover);}
table.nets td:nth-child(8) {text-align: right;}

table.dicts {border-collapse: collapse;width: 100%;background: var(--color-white);border-radius: 8px;overflow: hidden;box-shadow: var(--shadow-md);}
table.dicts th {background: var(--gradient-primary);color: var(--color-white);padding: 15px 12px;text-align: left;font-weight: 600;font-size: 14px;}
table.dicts td {padding: 12px;border-bottom: 1px solid var(--color-table-border);}
table.dicts tr:last-child td {border-bottom: none;}
table.dicts tr:hover {background-color: var(--color-hover);}
table.dicts td:nth-child(2) {text-align: right;}
table.dicts td:nth-child(3) {text-align: right;}

/* Paragraph and content spacing */
p {margin: 0 0 15px 0;line-height: 1.7;}

/* Responsive design */
@media screen and (max-width: 768px) {
    #header {font-size: 1.5em;padding: 20px 15px;letter-spacing: 1px;}
    #maincontainer {width: 95%;padding: 0 10px;margin: 15px auto;}
    #contentcolumn {padding: 20px 15px;}
    ul#navtop {padding: 10px 15px;overflow-x: auto;}
    #navtop li {display: block;margin: 5px 0;}
    #navtop a {display: block;padding: 10px 15px;}
    #leftcolumn, #rightcolumn {float: none;width: 100%;margin-bottom: 20px;}
    .form .input, .form textarea {width: 100%;max-width: 100%;}
    .searchinput {width: 100%;max-width: 250px;}
    table.nets, table.dicts {font-size: 13px;}
    table.nets td, table.dicts td {padding: 8px 6px;}
    table.nets th, table.dicts th {padding: 10px 8px;}
}

/* Code blocks */
code, pre {background: var(--color-hover);padding: 2px 6px;border-radius: 4px;font-family: 'Monaco', 'Menlo', 'Consolas', monospace;font-size: 14px;color: var(--color-danger);}
pre {display: block;padding: 15px;border: 1px solid var(--color-border);overflow-x: auto;}

/* Flag icons spacing */
.fi {margin-right: 5px;}